There’s a few ways to customize your Zembula experience via our API:

  1. Snippets: Overlay, Slide-In and Inline Embed Experiences
  2. Call to Action for Overlay, Slide-in and Inline Embed Experiences

1. Customizing Snippets: Overlay, Slide-In and Inline Embed

Now you can safely embed inline, slide-in and overlay Experiences to your blog by just pasting in the code Snippet that changes from embed to embed directly into the blog content area. Make sure to never add the same snippet twice to the same page as each snippet is intended for a single piece of content. Having, for example, the same inline embed snippet and overlay on the same page may cause unpredictable behavior. Just create two snippets. It’s ok if they are both using the same experience.

Settings Object

You can define callbacks and behavior in the Zembula object on the window. This object should be defined before any of the snippet specific code is called, but can be defined after the shared javascripts and stylesheets.

<head>

 window.zembula = {

   startedInteracting: function(snippetId, experienceParams) { }, // called when interaction starts

   revealed: function(snippetId, experienceParams) { }, // called on experience revealed

   redeemed: function(snippetId, experienceParams) { }, // called on experience redeemed

   zmblPopover: true, // prevents the overlay/popover from showing up unless zmbl_popover is in URL

                                  // can also be set to UUID of snippet

   manualPopover: true // manage overlay through API hooks

 }

</head>

 

Overlay Embed (a.k.a., popover)

Default Behavior

By default, the overlay will open when someone lands on the page. They will have to click the X button to close the experience.

Settings

The settings are optional and allows for more control over the Overlay. They can be defined in the Zembula object in the window context. For example:

window.zembula = {

manualPopover: true

}

API Hooks

The API hooks can be accessed through the window.zmbl function with the “run” command.

Example:

zmbl(“run”, “28f13953-71bd-4dcc-8a3a-f927cb2671a6”, “openPopover”)

Callbacks / Handlers

The API callbacks are called when key events happen and are passed data about the experience such as the redeem code and other experience details. Some of the experience detail may be subject to change. Only experience detail mentioned in this document is supported. To set a callback handler, call the window.zmbl function with the “callback” command.

Example:

var customRedeem = function(snippetId, experienceParams) {
 // do something custom here(e.g., closePopover)
}

zmbl(“callback”, “28f13953-71bd-4dcc-8a3a-f927cb2671a6”, “redeemed”, customRedeem)

In the Experience Builder it is possible to set the Call To Action as “Advanced” which will only trigger the callbacks defined above with the action parameter set to “CALLBACK”. The callback behavior is useful for applying redeem codes to a shopping cart as discount codes, manually closing the overlay using the API hooks, adding products to the shopping cart and anything else you might dream up.

Slide In Embed

Default Behavior

By default, the slide-in will open when someone lands on the page. They will have to click the button to slide it out(leaving only the tab).

Criteria

Criteria can be added to either make the slide-in appear on a certain scroll distance(either for the body or for a criteriaId) or for a delay after it has been loaded(usually done on page load).

Settings

The settings are optional and allows for more control over the slide-in. They can be defined in the zembula object in the window context. For example:

window.zembula = {
     manualSlideIn: true
}

API Hooks

The API hooks can be accessed through the window.zembula object.

Callbacks / Handlers

The SlideIn has the same callbacks as the Overlay(see Overlay section).

Inline Embed

Inline Embed has the same Callbacks as the Overlay and ignores the settings object.

Data Flags

API Hooks

FAQ

Q: My Zembula settings are not taking effect and I can’t access the API hooks?

A: If the Zembula object is overwritten after the document is loaded the hooks will be erased and the parameters will not be read. Also, make sure the object is defined in the window context.  

Did this answer your question?