Guides
Guides
Product ChangesContact Us

Launch Instabot inline

Suggest Edits

📘

FYI to the reader - I unlisted this specific doc because this specific implementation method doesn't make sense anymore...

Overview

Launching inline is useful for launching Instabot in situations where embedding rokoInstabot.js directly on the page-level is not possible, or undesirable.

To do this, we will do two things:

  1. Set up an event-trigger for your conversation in the Instabot portal
  2. Configure the web Instabot JavaScript

Contents

  1. Set up an event-trigger for your conversation
  2. Build the web Instabot snippet

🚧

Prerequisites

  1. Instabot portal account is created

  2. Instabot conversation is created

1. Set up an event-trigger for your conversation

  1. To start, let's create and assign your Instabot event-trigger to your conversation. Open your Instabot conversation, click Edit, then click Triggers.

  2. This page allows you to configure when and how the Instabot will launch. The first thing we'll do on this page is configure an event-trigger. Event-triggers uniquely link your website's Instabot code, and the conversation you're creating now.

  • Under Triggers, select Event Trigger
  • Under Where, type in a brief and descriptive event-trigger. For this example, let's create an event-trigger called need-help-page-click
  • Click Create New Event Trigger to add it
640

Add event-trigger for web Instabot

  1. Click Publish in the top right corner.

Now we're ready to create the web Instabot snippet.

2. Build the web Instabot snippet

  1. In the Instabot JavaScript snippet below, replace the following value with your value:
  • apiKey - Your Instabot API key
  • initialEvent - The Instabot event-trigger attached to your conversation in the previous section
<!-- base web-Instabot JS snippet 
  to launch IB inline -->
<a onclick="(function (i, s, o, u, a, m) { a = s.createElement(o); a.innerHTML = 

// insert your Instabot API key between the unicode double-quotes (&quot;) - required
'apiKey: &quot;----Your Instabot API key----&quot;,' + 

// b. insert your IB event-trigger between the unicode double-quotes (&quot;) - required
'initialEvent: &quot;----Your IB event-trigger----&quot;'; 

// do not modify below this
tags = s.getElementsByTagName(o); m = tags[tags.length - 1]; a.async = 1; a.src = u; m ? m.parentNode.insertBefore(a, m) : s.body.appendChild(a); })(window, document, &quot;script&quot;, &quot;https://widget.instabot.io/jsapi/rokoInstabot.js&quot;);" href="#" rel="bookmark">
Click this button to launch Instabot inline via onClick without embedding on page-level</a>

🚧

IMPORTANT

Make sure the value in window.RokoInstabot.trigger is set to the name of the event trigger you configured in section 1.

In this case, make sure you replace YOUR-specific-conversation-event-trigger with the exact event-trigger that you configured in section 1.

  1. Now, copy your Instabot JavaScript, insert it anywhere between the <body></body> tags in your webpage's source code and set your webpage live. The Instabot should now appear in the lower-right corner of your webpage when the page loads!

Updated over 5 years ago