Page Comparison

Please Note

This document describes how to embed the CallDeflectAI/Express Chatbot on your website
For general chatbot configuration documentation, please see: Chatbot V3

Embedding a Chatbot on a Web Page Using a Simple

...

HTML Snippet

This documentation aims to guide individuals through the process of embedding a chatbot on a web page using a simple a JavaScript snippet. We will explore different options for embedding the chatbot, launching the chatbot, and integrating the chatbot on your website.

...

Please be aware that the instructions provided in this documentation are intended for users with an active Orbita account (either 30-day free trial of Express, CallDeflectAI or paid account)

...

Info

Before you Start

To embed the bot, you will need:

An active Orbita account
An email from Orbita with your <Organization ID> and <Project ID>
An email from Orbita confirming

...

your

...

If you haven't received this email or need assistance with your Orbita account, please contact Orbita support for help.

domain has been whitelisted

Note

Whitelisting your site

Before you can embed your chatbot on a website, the website hosting the bot needs to be whitelisted. To whitelist your website:

Please send an email to your Orbita account representative indicating:

The name of your company
The website on which you will host the bot
Indicate you’re requesting to have your site whitelisted

This will open a ticket with Orbita support and will be used to communicate the status of the request and whitelisting process.

\uD83D\uDCD8 Instructions: Embedding the Chatbot

To integrate the chatbot on your website, follow these steps:

Edit the Template - Edit the HTML template of the pages where you want the chatbot to be displayed. This may include your homepage, product pages, help pages, or any other relevant sections of your website.
Paste this HTML/JavaScript Snippet in Page Footer. The email you receive will contain a snippet like this:

<div id="orbitabot"
data-orbita-init='chatbot'
data-orbita-project-id='[YOUR_PROJECT_ID]'
data-orbita-server-url='https://express.orbita.cloud'
data-orbita-custom-data = '{"org": "[YOUR_ORGANIZATION_TOKENID]"}'
data-orbita-bot-Settings='{"elementId": "orbitabot", "template": "express"}'></div> <script src="https://express.orbita.cloud/chatbot/v3/chat.js"></script>

Insert the JavaScript snippet you received via email in the above into your edited template. The snippet may be placed anywhere within the HTML body. Make sure to replace the Project ID and the Organization ID with the values from the email.

Save and Publish Template - Save and publish the updated template(s) on your website. Once published, the chatbot will be live and functional, based on the selected launch option.
Refresh the web page - Refresh your web page, you should now see the chatbot icon appearing.

\uD83D\uDCD8 Instructions - Embedding the Chatbot (Option #2)

This is an alternative approach to embedding the bot that uses just JavaScript, instead of the HTML/JavaScript snippet in Option #1.

While Option #1 is preferred, there may be some situations where Option #2 is needed. In these situations, it’s recommended that you use the following JavaScript snippet, making sure to replace <Project ID> and <Org ID> with your project ID and organization ID.

Code Block

    <script src="https://express.orbita.cloud/chatbot/v3/chat.js"></script>
    <script>
            OrbitaChatBotV3.init({
                projectId: '<Project ID>',
                serverUrl: 'https://express.orbita.cloud',
                customData: {
                    org: "<Org ID>"
                },
                botSettings: {
                    elementId: 'orbitabot',
                    template: 'expressautoconnect'
                }
            });
    </script>

\uD83D\uDCD8 Instructions - Launching the Chatbot

...

data-orbita-bot-Settings='{"elementId": "orbitabot", "template": "expresspeekview"}'>

Troubleshooting Steps

“My bot is not displaying”

If your bot isn't displaying, there are a few steps you can take to troubleshoot the issue.

Verify you followed the launch instructions provided above to ensure that you have properly set up the bot integration.
Verify that you have updated the <Project ID> and <Organization ID> with the information provided. These IDs are crucial for the integration to work correctly, so double-check that you have entered them accurately.
Confirm that your website has been whitelisted according to the whitelisting steps outlined above. Whitelisting is necessary to grant your website access to display the bot. Ensure that you have followed the prescribed whitelisting process correctly.

By carefully reviewing these points and ensuring that you have followed all the necessary steps, you should be able to resolve the issue and have your bot displayed successfully.

“My bot is still not displaying.”

If your bot is still not displaying despite following the previous troubleshooting steps, there are a few additional actions you can take.

Check your browser's Developer tab for any visible JavaScript errors. To access the Developer tab, right-click on your webpage and select "Inspect" or "Inspect Element" (this may vary depending on the browser you are using). In the Developer tab, navigate to the "Console" section and look for any errors or warnings related to JavaScript. If there are any errors present, address them accordingly.
Resolve any errors that are unrelated to Orbita. These errors could potentially interfere with the functioning of the bot. Check for any conflicting JavaScript code or errors in your webpage that might be causing the issue. Correcting these errors can help eliminate any potential conflicts.
Contact Orbita support for further assistance if after resolving all other errors you encounter any remaining errors, or anything specifically related to Orbita.

\uD83D\uDCCB Related articles

...

Versions Compared

Old Version 6

New Version Current

Key