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: 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
-
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 bubble. 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
Comments
0 comments
Please sign in to leave a comment.