Personalization

Display custom popups to your user based on rules like geolocation, specific dates / hours or number of visits.

Only CMS data will work inside Personalization popup (not unit data)

Enable Personalization on the website

To be able to see Personalization inside your sidebar, you need 2 conditions: - In the website parameters, toggle "Enable Personalization" - Your theme must have at least one template available in the "lightbox" folder.

When you activate Personalization, you will get a new section in the sidebar

Personalization allows you to create popups that display when some conditions are met: for example if we are on a specific day, if the user is in France, or only after a number of visits..

Vocabulary

Trigger: The rules deciding when to show your popup. It can be based on the number of visits, pages views, between specific dates, if there is a query parameter in the URL, etc...

Message: This is what you want to display to the user. Usually, these are popups, but you could make a template for a notification bar for example.

Campaign: A campaign is the association of a trigger and a message together. This is where you choose on which page will your popup displays. Example "Between 11am and 2pm (trigger), show the a popup with a discount (message) on the homepage and the restaurants page (destination)"

1/ Add a new popup template 👩‍💻

In your theme, inside the folder lightbox, create a new file simple-popup.html. Just like block, header, pages, the name of your file will be the key of your popup. You can use variables inside the popup.

To edit the label and the configuration of your variables, inside Testeur, at the end of the sidebar there is a new section "Lightbox" where you can edit your lightbox like a block.

Only options relative to the appearance of the popup should be in the block. All options related to behavior (delay, geolocation, etc...) should not be available at block level because they will be handled by Personalization.

First implementation of Personalization?

2/ Update your Javascript to show the popup

To do so, you will use window.GalaxyHelpers.personalization method, with an object containing a callback function.

This function will be called automatically by Personalization when a popup should be visible.

This callback function has one parameter, campaign, It contains campaign.html (string of the html of your campaign) and campaign.callbackDisplay() to notify Personalization that the popup has been seen.

So you need to inject the HTML inside the page, and display the popup. When the user has seen it, inform Personalization using campaign.callbackDisplay()

window.GalaxyHelpers are available in all Galaxy websites and automatically included before bottom.html

Generic way

/* Generic code, see next tab an example for jQuery + Boostrap */

function initPersonalization(){
    if (!window.GalaxyHelpers) return;
    
    window.GalaxyHelpers.personalization({
        callback: function(campaign) {
            // Write your code here
            console.log(campaign.html); /* HTML is inside campaign.html */
            /* When the user has seen / closed the popup, call the function campaign.callbackDisplay() */
            campaign.callbackDisplay();
        },
    });
}

initPersonalization();

Example with jQuery + Boostrap

/* Example for jQuery + Boostrap modal */

function initPersonalization(){
    if (!window.GalaxyHelpers) return;

    window.GalaxyHelpers.personalization({
        callback: function(campaign) {
            /* Display popup the way you want it (example jQuery + bootrap) */
            const $el = $(campaign.html);
            $('body').append($el);
            $el.modal('show')

            /* Inform Personalization that the campaign has been showed */
            campaign.callbackDisplay();
        },
    });
}

initPersonalization();

Using Personalization inside an extension

This will only be available after the release on Tuesday, 23rd September 2025.

If you wish to use a message/lightbox template inside an extension, a new parameter source is needed inside the object parameters.

See example below, the property source must contain the extension key (key = name of the folder)

// new property "source", used for extensions to indicate their key
window.GalaxyHelpers.personalization({
    callback: function(campaign) {
        // Write your code here
    },
    source: 'my-extension-key', // Replace with your extension key (only for extensions)
});

How to test the design of my popup

Create and preview your popup

In the section "Messages", create a new message and select your template. When created, you will be redirected to a screen where you can fill the different variables of your template.

To preview your message, click on "Preview lightbox".

Advanced

Configuration

If you have trouble understanding why a popup does or doesn't display on your page, you can enable the debug option of GalaxyHelpers.personalization

If you only want to debug in your browser, you can add a new cookie (help), with the name GALAXY_DEBUG and the value PERSO

If you want to activate it at theme level, use debug in the configuration object:

function initPersonalization(){
    if (!window.GalaxyHelpers) return;
    
    window.GalaxyHelpers.personalization({
        debug: true, // Add debug messages in Devtools Console
        callback: function(campaign) {
            // code to show popup
        },
    });
}

initPersonalization();