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:
"@type": "https://assets.voyagetext.com/schemas/modal"
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].