The content personalisation system allows you to change the text of popup elements such as the title, content, and buttons via JavaScript code. You may want to do this for a number of reasons, such as personalising a message to a logged-in user or greeting a user with “Good Morning” if a user sees the popup in the morning, or “Good Afternoon” if they are seeing it in the afternoon.
Any information that is usable in your JavaScript code can be displayed on the popup.
All popup types support content personalisation, but not all inputs support it, look out for inputs on the popup edit page with this icon to know where content personalisation will work.
To get started, use the template syntax below, within one of the inputs, to tell the popup where to display your personalised content.
{variable}The popup script will search for the curly braces { } and replace with the corresponding value for “variable”. You can change “variable” to any word you want, we’ll show you where to define it later.
Use the below syntax to set a default value in case “variable” is undefined or null.
{variable|Default Value}An example of this is shown below. Notice how the popup preview displays the default value in place of the template syntax.
Once you have added the template syntax to your popup, you’ll need to tell Popup about those variables you want to use, this will require adding some JavaScript to your own site, where you want the popup to show up.
Use the below popup API function to tell the popup script about your variables.
_gl.p.pushData({group: “content”, key: “variable”, value: “hello world”});This function takes one argument. In the example above, we provide an object with three properties;
- group, which must be set to “content” when we want to use the value for personalisation,
- key, which is the variable name you used in the template syntax earlier
- value, which is the value you want to show up in the popup content.
If you want to use multiple variables in your popup, use the same function but pass an array of these objects instead, example below.
_gl.p.pushData([
{ group: ”content”, key: “foo”, value: “Foo” },
{ group: “content”, key: “bar”, value: “Bar” }
]);Once you have called this function on your site. Your popup should start using the value you set instead of the default value.
Refer to the API reference for more information on the Popup JS API by clicking here