# Personalization

{% hint style="info" %}
Only CMS data will work inside Personalization popup (not unit data)
{% endhint %}

### 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](https://3028197268-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LYM6a76uZePOTen0dIw%2F-M5fR_bn7O-rAKi97uPR%2F-M5fU80L4aQV_2FXI7Hu%2FCapture%20d%E2%80%99e%CC%81cran%202020-04-24%20a%CC%80%2011.19.20.png?alt=media\&token=6b0243be-4d7b-483f-9afb-2bf2a354587b)

###

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.

{% hint style="warning" %}
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.
{% endhint %}

### First implementation of Personalization?

2/ Update your Javascript to show the popup&#x20;

To do so, you will use `window.GalaxyHelpers.personalization`  method, with an object containing a **callback function**.&#x20;

This function will be called automatically by Personalization when a popup should be visible.&#x20;

\
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*

{% tabs %}
{% tab title="Generic way" %}

```javascript
/* 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();
```

{% endtab %}

{% tab title="Example with jQuery + Boostrap" %}

```javascript
/* 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();
```

{% endtab %}
{% endtabs %}

## Using Personalization inside an extension

{% hint style="danger" %}
This will only be available after the release on Tuesday, 23rd September 2025.
{% endhint %}

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)*&#x20;

{% code overflow="wrap" %}

```javascript
// 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)
});
```

{% endcode %}

## 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**".

![](https://3028197268-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LYM6a76uZePOTen0dIw%2F-M7H3QSRtojSe0MKexB9%2F-M7HEumueXmluikcLMV9%2FCleanShot%202020-05-14%20at%2010.13.59%402x.png?alt=media\&token=2238fd49-dfbe-4a2d-9c82-328e3bc9935d)

## 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

![](https://3028197268-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LYM6a76uZePOTen0dIw%2F-M5fgwUJtgkj3JlAef5s%2F-M5fj-Z0V7wXrYMIk44R%2FCapture%20d%E2%80%99e%CC%81cran%202020-04-24%20a%CC%80%2012.28.56.png?alt=media\&token=4b98fa27-64a6-4e86-a835-9a0a4e2b27ca)

If you only want to debug in your browser, you can add a new cookie ([help](https://www.google.com/search?q=how+to+add+cookie+manually+dev+tools\&oq=how+to+add+cookie+manually+dev+tools)), with the name `GALAXY_DEBUG` and the value `PERSO`

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

```javascript
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();
```
