Bubble Modal
Updated over a week ago
Bubble Modal-standard-2

Improve your customers' experience by including a floating bubble modal on your site.

Bubble Modal Customizations

Getting Started

Performing 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

voyage.init('', {   popup: true,   bubble: { labelText: '' }}

Example Code

voyage.init(, {  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.

Note: Depending on your modal code, the following step may not be necessary. If you see the following line:

You can skip this step.

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 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 [email protected] 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

      • 'hidden' will display pop-up first

      • 'shown' will display bubble first, which can then be expanded.

  • 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

  • customLabel: string

    • Custom HTML to be displayed on the label. Replaces the labelText properties.

  • customCloseElement: string

    • Custom HTML content for the close CTA

  • closeElementText: string

    • Label for the close CTA

If you have any additional questions please contact us at [email protected].

Did this answer your question?