Flipbot for Developers

If you want to extend Flipbot’s capabilities, you can do so with Custom Code. Flipbot has a number of events that you can hook into with JavaScript to create custom functionality.

Method

You can add functionality to Flipbook by using FlipbotCustomFunction();. Create this function in a Custom Code Block in the Uberflip app (with the Body Bottom placement), then use the following events and variables within it:

Flipbot Events

You can trigger on the following events:

  • intrigued fires when a visitor views their 2nd unique Item

  • engaged fires when a visitor views their 3rd unique Item

  • inLove fires when a visitor views their 4th unique Item

  • onFire fires when a visitor views their 5th unique Item, or any unique Item thereafter

  • reEngaged fires when a visitor returns to view any Item after at least 30 minutes of inactivity

  • gotMapUser fires when the user’s MAP profile data is retrieved

    Note: MAP profile data is available in the variable Flipbot.vars.mapUser. Before using, you should ensure that the variable is not empty.

  • gotGeoData fires when the visitor’s location data is retrieved

    Note: Location data is available in the variable Flipbot.vars.geoData.

Flipbot Variables

Flipbot has a number of variables that you can leverage. These are listed in Flipbot.vars. To view a list of variables, use console.log(Flipbot.vars).

Example

Below is an example of how you might customize Flipbot. This code snippet triggers a soft-gated CTA only when an unknown visitor engages with their second piece of content:

1
2
3
4
5
6

Flipbot.on('intrigued', function(){
    if(Flipbot.vars.mapUser === false){
        Flipbot.showCta({"id":Flipbot.vars.ctaConfig.id, 
                         "gate":"soft", "delay":0, "dismiss":"Maybe later"})
    }
});

In this example, the initial configuration only provides a CTA ID, therefore no CTA is displayed initially, and instead is triggered manually.

Note: Using this method, the CTA will be displayed on mobile devices. This experience is not ideal, so we recommend that you specifically exclude mobile devices with any custom configuration. To check for mobile devices, use this variable: Hubs.Config.isMobile.