Page Comparison

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.

...

...

\uD83D\uDCD8 Instructions: Embedding the Chatbot

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

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

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

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

2. Refresh the web page - Refresh your web page, you should now see the chatbot icon appearing.

 \uD83D\uDCD8 Instructions -

...

Embedding the Chatbot

...

There are three ways to launch the chatbot on your web page: auto-launch on page load, and launching on chatbot button click/tap. Each option offers a different user experience, allowing you to choose the method that best suits your website's needs.

Launching on Chatbot Button Click/Tap

In this case, the chatbot will launch only when a user clicks or taps on a designated chatbot button. This option gives users control over when they want to interact with the chatbot and can help reduce distractions on the page.

• This is the default behavior of the chatbot.

• No additional configuration required to enable this behavior.

Launching on Page Load

With this option, the chatbot will automatically launch and be visible to users as soon as the page loads. This can be useful for providing immediate assistance or information to your visitors.

Note: Using this configuration will automatically launch the chatbot only for Desktop site visitors, not mobile visitors.

To launch on Page Load, change the value of the “template” key of the data-orbita-bot-Settings attribute to “expressAutoLaunch”:

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

Launching with Peek View

To launch the bot in “peek view” mode, change the value of the “template” key of the data-orbita-bot-Settings attribute to “expresspeekview”:

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

Launching with Google Tag Manager

...

(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 instantiate the virtual assistant using use the following approachJavaScript snippet, making sure to replace <Project ID> and <Org ID> with your project ID and organization ID.

    <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

There are three ways to launch the chatbot on your web page: auto-launch on page load, and launching on chatbot button click/tap. Each option offers a different user experience, allowing you to choose the method that best suits your website's needs.

Launching on Chatbot Button Click/Tap

In this case, the chatbot will launch only when a user clicks or taps on a designated chatbot button. This option gives users control over when they want to interact with the chatbot and can help reduce distractions on the page.

• This is the default behavior of the chatbot.

• No additional configuration required to enable this behavior.

Launching on Page Load

With this option, the chatbot will automatically launch and be visible to users as soon as the page loads. This can be useful for providing immediate assistance or information to your visitors.

Note: Using this configuration will automatically launch the chatbot only for Desktop site visitors, not mobile visitors.

To launch on Page Load, change the value of the “template” key of the data-orbita-bot-Settings attribute to “expressAutoLaunch”:

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

Launching with Peek View

To launch the bot in “peek view” mode, change the value of the “template” key of the data-orbita-bot-Settings attribute to “expresspeekview”:

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

Troubleshooting Steps

“My bot is not displaying”

...