Bubble Modal

Improve your customer experience through having a minimized bubble modal.

Bubble Modal-standardGetting Started

Perfoming two small steps or changes to the way in which you load the Voyage Global Tag and your modal code itself, will have you up and running with a Bubble Modal that is displayed when your modal closes.

Step 1: Updating the Global Tag

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

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 used to configure the bubble Modal.

Step 2: Updating the Modal Code

Within your modal HTML code itself, locating preventDefaultAndClose method and removing few lines of code is all that is needed to convert a standard Voyage 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" }, "*");
};

 

Finishing Up

Once your site global tag and modal is updated with 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 support@voyagesms.com for further assistance.

Available Settings Options

  • containerStyle: CSS Style property
    • All standard CSS style properties to be applied to the bubble container
  • defaultState: "hidden" | "shown"
    • Initial state of the bubble
  • animationShow: "bounce-in" | "bounce-out" | "slide-in" | "slide-out"
    • CSS animation when the bubble appears
  • animationHide: "bounce-in" | "bounce-out" | "slide-in" | "slide-out"
    • CSS animation when the bubble hides
  • animationClose: "bounce-in" | "bounce-out" | "slide-in" | "slide-out"
    • CSS animation when the bubble closes
  • draggable: boolean | "desktop" | "mobile"
    • Allows the bubble to be dragged around. Support desktop or mobile only
  • size: number
    • Height and width of the, units are in pixels
  • labelText: string
    • Label to be displayed on the bubble
  • labelStyle: CSS Style Properties
    • All standard CSS style properties to be applied to the label
  • customHtmlContent: string
    • Custom HTML to be displayed on the label. Replaces the labelText properties.