Hiya, I'm Flipbot! v2.0

Once you've added me to Slack, here's how to configure the rest of me in Uberflip:

Step 1: Add the Script

Add this code (inside a <script> tag) to a new code block in your Hub's Appearance > Custom Code Section:

/* Flipbot: start*/
var flipbot_base = 'https://flipbot.uberflip.com/',
flipbot_config = {
        'base':flipbot_base,
        'team_id':'[YOUR SLACK TEAM ID]',
        'cta':{'id':12345}, 
        'map':'marketo'
        };

$.when( $.getScript(flipbot_base + 'js/flipbot-v2.min.js') ).done(function(){
     Flipbot.init( flipbot_config );
});
/* Flipbot: end*/

Step 2: Configure flipbot_config variable

Flipbot is fairly customizable depending on what information you want sent to your reps in Slack (based on your Marketing Automation Platform and its available fields). Here's an explanation of the configuration parameters that are required and optional.

• team_id [required] this is your Slack Team's system ID

• map [required] which MAP’s cookie data to look up (currently supports Marketo, Eloqua, Pardot and HubSpot)

• cta [required]. This should be passed as a json with various optional variables. Here's a bare bones example:

  'cta':{'id':12345}

  • id this is the only requirement. Unlike Flipbot v1 where fields were passed in (rather cumbersomely), with v2, you can configure which fields you want passed into Slack by simply setting up a dedicated CTA (call it "Flipbot" for convenience). The CTA will not show, but will be used to pull known visitor information when a Sales Stream loads.

  As with v1 however, you can configure this CTA to also display as a gate:

  'cta':{'id':12345, 'gate':'soft', 'delay':1, 'dismiss':'no thanks'}

  • gate if provided, and visitor is not known, will be used to 'gate' the experience using a CTA embed. (i.e. the CTA whose ID is provided will display overtop the experience).

    The optional values are:

    "soft" the user will be able to dismiss the CTA (by clicking "no thanks" below it)

    "hard" the user will be forced to fill out the CTA

  • delay if provided, will set how many seconds to delay showing the CTA

  • dismiss if provided, and gate is set to 'soft', customized the dismissal link below the CTA

  Note: This feature is currently not supported on mobile devices and will simply not show the CTA in those cases.

  Another Note: If there are fields you want passed into Slack, but not displayed to the visitor, simply set up those fields as "hidden" when configuring your CTA.

  One Last Note: It's recommended you add the field "ID" (your MAP should have it available) and set it as hidden. This will allow Flipbot to pick a fun emoji for the notification :)

• ignore_ip [optional] if provided, upon getting the geo data, if the IP’s match, no notification will be sent.

  Note:you can set this to an array of multiple IP addresses.

• debug [optional] if set to true, will spit out a whole bunch of console logs

Step 3: Get fancy (for developers)

For more advanced implementations of Flipbot, after calling Flipbot.init() you can trigger custom functionality on a number of events as follows:

Flipbot.on('[event-name]', function(){ alert('hi!');});

Here's a full list of events you can trigger on:

• 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 using any of the 3 methods.

  This data would be available in Flipbot.vars.mapUser, but you would still need to check that it isn't empty.

• gotGeoData fires when the visitor's location data is retrieved.

  This data would be available in Flipbot.vars.geoData.

Here's an example of triggering a soft gated CTA only once an unknown visitor engages with their 2nd piece of content. In this example, the initial configuration only provides a CTA ID, therefore no CTA is displayed initially, and instead is triggered manually.

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

FYI - using this method, the CTA will show on mobile devices - but the experience is sub-par, so it's recommended you exclude mobile as well with any custom configuration. You can check for mobile devices with the variable Hubs.Config.isMobile.

Of course, to see what other variables are available to you, simply perform:

console.log(Flipbot.vars)

---

Questions or Comments