The Mobi Developer Hub

Welcome to the Mobi developer hub. You'll find comprehensive guides and documentation to help you start working with Mobi as quickly as possible, as well as support if you get stuck. Let's jump right in!

Get Started    

WordPress

Integrate web Instabot into your WordPress site

Overview

This page will guide you through inserting web Instabot into any page or post of your WebPress site, or how to configure Instabot to launch when a user clicks a link or button.


Contents

  1. Install and configure the Instabot WordPress plugin
  2. Advanced
    a. Launch Instabot on click
  3. Troubleshooting
    a. WP Rocket plugin
    b. Avada theme

1. Install and configure the Instabot WordPress plugin

  • You only have to perform these steps once! Once the Instabot code is inserted into your WordPress site, you can change your bot's location, behavior, and content in the Instabot portal without touching any code, ever again!

  • You can find the Instabot WordPress plugin here: https://wordpress.org/plugins/instabot/

  1. In your WordPress dashboard, select Plugins, click Add New, search for Instabot,
    Install, then finally Activate
Install the WordPress Instabot plugin

Install the WordPress Instabot plugin

  1. Get your Instabot API key, enter it into the plugin settings page, then click "Save changes"
Activate the `Scripts n Styles` WordPress plugin

Activate the Scripts n Styles WordPress plugin

  1. That's it! Now you're ready to create your first bot in the Instabot portal and launch it live!

2. Advanced

a. Launch Instabot on click

Event Triggers

This section will show you how to configure Instabot to launch when a user clicks on a specific link or button on your WordPress page or post.

To insert Instabot into your WordPress site, we'll need to install a WordPress plugin that allows you to insert JavaScript in your WordPress posts.

Steps 1 and 2 only need to be completed once

  1. In your WordPress dashboard, select Plugins, then Add New.
Add a new WordPress plugin

Add a new WordPress plugin

  1. Search for the WordPress plugin Code Embed, then click Install, then click Activate.
Install the `Code Embed` WordPress plugin

Install the Code Embed WordPress plugin

  1. Now, let's jump over to the Instabot portal to create and assign a Instabot event-trigger to your conversation. Open your Instabot conversation, click Edit, then click Trigger Settings.

  2. Create a new event-trigger by selecting "event-trigger" in the dropdown, naming your event-trigger something intuitive like "need-help-button-click", click "Create New Event Trigger" to add it, then click 'Save'.

Trigger settings for launching Instabot via event-trigger

Trigger settings for launching Instabot via event-trigger

  1. Now we will prepare the Instabot JavaScript snippet to insert into your page - adjust the below required values with your values:
    • apiKey - Your Instabot API key
    • Your Instabot event-trigger - The event-trigger attached to your Instabot conversation as configured in the Instabot portal
    • Link name - The text of the link that users will click to launch Instabot
<script type='text/javascript' src='//app.instabot.io/jsapi/v2/rokoInstabot.js'>

// replace with your own Instabot API key
apiKey: 'Your Instabot API key'
</script>

<!-- replace with your specific conversation's event-trigger in the portal -->
<a href='#' onclick='window.RokoInstabot.trigger("Your Instabot event-trigger")'>
  
LINK NAME
  
  </a>
  1. Open the post you want to insert Instabot into and enable the Custom Fields option.
Enable `Custom Fields` in a new post

Enable Custom Fields in a new post

  1. Now, let's insert the Instabot JavaScript into your post:
    • In the Custom Fields section, click Enter New
    • In the Name field, enter CODE1
    • In the Value field, paste the web-Instabot JavaScript containing your values
    • Click Add Custom Field
    • In the body of your post, enter %CODE1% anywhere in the post
    • Click Update
Insert the web Instabot JavaScript into your post

Insert the web Instabot JavaScript into your post

  1. Now, view your new post, click your link (if applicable), and your Instabot will launch in the bottom-right corner of your post!
Instabot launching on link-click

Instabot launching on link-click


3. Troubleshooting

3a. WP Rocket plugin

If you are using the WP Rocket caching plugin to make your WordPress site load faster, please follow the below instructions to avoid any potentially negative interactions between Instabot and the WP Rocket plugin.

  1. In your WordPress configuration page, open the WP Rocket settings page, then open the File Optimization tab
WordPress configuration --> WP Rocket --> File Optimization

WordPress configuration --> WP Rocket --> File Optimization

  1. Scroll down to the section JavaScript Files, add /jsapi/v2/rokoInstabot.js as an excluded JavaScript File
Add `/jsapi/v2/rokoInstabot.js`

Add /jsapi/v2/rokoInstabot.js

  1. Uncheck the "Load JavaScript deferred" setting
Uncheck "Load JavaScript deferred"

Uncheck "Load JavaScript deferred"

  1. Click Save, wait ~15min, then you should be all set!

3b. Avada theme

If you are using the Avada theme's 'Code Block' feature to insert Instabot into the page/post, make sure that the "Disable Code Block Encoding" option under "Theme Options > Advanced" is set to enabled.
If this is not possible, try formatting your Instabot JavaScript to remove all new-lines (the code should be a single line) - see an example of this here

For more information, refer your developer to this article documenting the issue