Bubble Modal

Improve your customer experience by having a floating bubble modal on your site.

Performing two steps to update the way in which you load the SMS Tracking Pixel and your modal code itself will have you up and running with a Bubble Modal that is displayed when your modal closes.

Step 1: Update the Global Tag

Step2: Update the Modal Code

Available Settings Options

Step 1: Updating the Global Tag

First, a new bubble option must be added to the SMS Tracking Pixel script with the settings for which the modal will display. The below examples should be inserted near the very end of the SMS Tracking Pixel within the first set of <script> tags. There is a multitude of ways in which the modal can be configured with default values set in advance.

Note: Remember to replace [Client_ID] below with your specific client ID.

voyage.init('[CLIENT_ID]', { 
  popup: true, 
  bubble: { labelText: '<BUBBLE_LABEL>' }
}

Example Code

voyage.init([CLIENT_ID], {
  popup: true,
  bubble: {
    containerStyle: {
      color: "white",
      background: "#3f5cfb",
    },
    labelText: "GET \n 10%",
    labelStyle: {
      fontFamily: "'Rubik', sans-serif",
    },
    animationShow: "slide-out",
  },

});

Please refer to Available Settings Options below for a complete list of all settings that may be used to configure the bubble Modal.

Step 2: Updating the Modal Code

Within your modal HTML code itself, locating the preventDefaultAndClose (or close) method and removing the few lines of code below is all that is needed to convert a standard modal into a bubble modal.

An example of what this will look like can be found in the following:
Note: Lines marked with '//---x' should be removed

var preventDefaultAndClose = function(event) {
  event.preventDefault();
  container.style.opacity = 0; //---x
  setTimeout(function () { //-------x
    window.parent.postMessage({ name: "voyage:close" }, "*");
  }, 500); //-----------------------x
};

The end result should look like the following:

var preventDefaultAndClose = function(event) {
   event.preventDefault();
   window.parent.postMessage({ name: "voyage:close" }, "*");
};

Once your site tracking pixel and modal are updated with the above details, you are ready to test the bubble modal!

In the event you need help or have questions regarding this process, please do not hesitate to contact your Onboarding Manager or CSM for further assistance.

Available Settings Options