WordPress

📘

Don't have an Instabot account yet?

Start your free trial today!

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

🚧

Prerequisites

1. Instabot portal account is created

2. Instabot conversation is created

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

2. Get your Instabot API key, enter it into the plugin settings page, then click "Save changes"

3. 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.

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

3. 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.

4. 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'.

5. 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='https://widget.instabot.io/jsapi/rokoInstabot.js' crossorigin>

// 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>

6. Open the post you want to insert Instabot into and enable the Custom Fields option.

7. 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

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

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

2. Scroll down to the section "JavaScript Files --> Excluded JavaScript Files", add widget.instabot.io/jsapi/rokoInstabot.js as an exclusion

3. Uncheck the "Load JavaScript deferred" setting

4. Click Save, wait ~5min, 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