Website

Introduction

According to Oracle, 50% of customers want a business or service provider to stay accessible 24/7. Placing a chatbot on your website improves user experience by providing all-time support information.
Orai has made it extremely easy for you to deploy a chatbot on the website.

Availability

You can access web deployment by clicking on the ‘Edit Settings’ button under Configure>Deployment>Website Chatbot.

Deploy

There are two ways of using the chatbot:

Direct Link

The direct link would open in a new tab when you click on the ‘Test Path’ button for the ‘Welcome new user path’ in the Builder section.

Website, Chatbot Widget on a Webpage

In this mode, you include a simple JavaScript within your Webpage HTML. You can copy the script to be included from the Script within the Website Chatbot section. See below for reference:

The script in the website Code :

Click on the Folder icon to copy the script.

Chat Position

Choose the position of the widget on the website.
Bottom Left Bottom right

Restrict Domain

Select this if you want the web widget to only load when hosted on the specified domains

Deploying the Chatbot on other Website Hosting sites

WordPress Website

Log into your WordPress account, and open the “Website creation” section.
Click on the plugin present on the left-hand side.
Search for “Header and Footer Scripts” and Install it.
Copy the Script of your bot from your Orai account, the script will be available in the Deploy > Website Chatbot section.
Add the Header and footer to your plugin, paste this script into the header section and save the file.
Note: Your WordPress account must be on a Business plan for this feature.

Magento 2 website

For adding custom scripts –https://magefan.com/blog/how-to-add-custom-code-in-html-head
Navigate to Admin Panel > Content > Configuration.
Choose the store view you want the head tag to be changed on or select Global in order to change it on every store view.
Find the HTML Head section and add your code in the Scripts and Style Sheets field.
Save on Click configurations.

Wix website

Please follow the below steps to add the orai script

• Log in to your Wix account
• Select Edit Site
• Click on Add Apps
• Search for HTML and choose « HTML I Frame/Embed » from the Wix App market
• Add it to your site
• A window pops up. Double click on the window or select the Enter Code option.
• Select the Code option
• Copy the script from the Orai Deploy, Website Chatbot section and paste the script here

Alternatively, use the below steps for the new version of the Wix websites

• Log in to your Wix account
• Select Edit Site
• Click on ‘Add’ from the panel
• Navigate to ‘Embed’ and select ‘Custom Embeds’
• Click on ‘+’ Add to site icon, next to ‘Embed a widget’
• A window pops up. Double click on the window or select the Enter Code option.
• Select the Code option
• Copy the script from the Orai Deploy, Website Chatbot section and paste the script here

Cargo.sites website

Each Cargo site contains a Custom HTML Editor where you can add HTML and JavaScript. Access is via the Design tab.
Copy and paste the Bot script with <script> and </script> at the beginning and end of the website.
Note: The script will be applied to all the pages of your website.
If you want the bot script to work only on particular pages then you can add HTML for a specific page only, and open the Code View window via the Formatting Toolbar of that page.

Shopify website

Go to your Shopify admin site
Here you have to click on “Customize theme”
Click on “Customize”
Upon opening the “Themes” section, you will be able to see the “Customize” button on the right side of the screen, click on it.
Click on Edit code.
Click on the “{/} theme. liquid”
Here you have to go to the “Layout” folder and click on it to display a .liquid files list, now click on “{/} theme.liquid”, this will automatically generate a code file on the right side of the screen.
Find </body> section
Here you can add your Javascript code, just above the “</body>” section, In this example, I added the following in order to show you how it works.
Refresh the screen and your chatbot should reflect on your website.

Bot v2 Theming

Introduction

We’ve introduced a newer version of our bot to provide a smooth and stable user experience to our customers. We’ve tried to improvise the look and feel of the bot by providing additional options around chat settings. Currently, this can be enabled depending on customer requirements. You can get it enabled directly or with a manual toggle switch.

Enablement

If already it’s enabled you can directly access it from Configuration > Web Display

Depending on your entitlement, you could need to enable it through Deployment > Website chatbot

Once you switch on the toggle, you would be able to see the new configuration settings under Configuration > Web Display

Setup

Bot icon

Bot Position: You can place your chatbot on the right or left bottom corner of your web page.
Bot Launch type: You can set a callout message along with the bot launch icon.
Launch Icon: This lets you upload an image that the chatbot launch icon would then have.
Chat Auto Pop-up: You can greet the user by landing on your website with an automatic pop message. You can configure the delay time, a maximum of up to 100 seconds.

Launch Screen

 

Enable the launch screen toggle to customize the launch screen of your bot.
Title: You can set the title as your organization/brand name which would appear in the header section of your bot.
Body text: Add a practical and appealing description of your product.
Query card title: Set a title such as ‘Ask a query’ to indicate the query section of your bot.
Query Placeholder: Set a one-liner to indicate the box where the user can type in their query, such as ‘Enter your question here’
Card Layout: You can align the multiple cards in a vertical or horizontal row
Add new card: This button allows you to enter a custom new card into the launch screen.

The card can be configured with the following parameters:
Card Image: Here you can upload an image to make your card more media-rich.
Card Header Text: Set a title for your card.
Card Body Text: Add a description for your card.
Button Name: Add a name for your button
Card Action Type: You can tag your button to a specific Path, URL and FAQ.
Chat Style

Choose from theme: Make your bot look more appealing by choosing a theme for it.

Chat header: You get multiple options to customize your chat header.

Chat header type: You can set a header as an icon or text with an icon.
Header icon: Upload an image from your storage or enter the image URL as the header icon.
Header text: You can add a tagline/header which would be displayed below the bot title text.
Alignment: Set the position of your header text to left or in the centre.
Background colour: Choose a background colour for your bot header.
Font and Font colour: Select a font style and colour for your header.

Chat background:

Customize the background of bot’s chat screen with an image, color gradient and video.

Background type: Select the background type as a solid colour, image, gradient and video from the dropdown menu. You can set the transparency level of your background colour.
Note: A Portrait image is recommended with a size of 1280*800 px. For the video mp4 format is recommended.

Response messages:

Customize your chat header and color of the text and text bubble.

Button Settings:

Set a col our for the response buttons.

User messages:

Customize the colour of users’ text messages and text bubble.
You can highlight the reply section by setting a suggestion text and background colour.

Settings

Message settings

Enable fading-in of new messages: Enabling this option will ensure that the messages and options in the chat bubble, appear one after another each in a separate line fading-in. This behaviour will increase the time taken to load all the chat bubbles and will only be applicable for the Website chatbot widget and not on the Standalone bot or other social channels.
Disable CTA response preview: It avoids generating the text of the CTA button as a response once a user interacts with the respective button.
Edit Previous User Message: Enabling this option allows bot users to modify their previous response to the bot. You can configure the following field by checking this box:
Default Response: This is the message that will be displayed when the user clicks on the change response. You can enter text up to 100 characters.
Disable SMO options: Enabling this option will prevent the user from revisiting the message and selecting multiple options if another option has already triggered the flow within that same message.

Notify users via sound on new messages from the agent: When in live chat, the user leaves the active page with the chatbot to browse other tabs or websites. They will hear the beep sound on the first unread message. This sound will only be played once and not on every new unread message, so as to make the user aware that an agent has sent a new message and also cause minimal distraction.

Voice settings

Enable Voice Input: This allows users to interact with the bot using voice inputs. This feature is currently only supported for Chrome browsers.

Chat menu settings

Enable ‘clear conversation history’ menu: Enabling this option allows user to clear the previous conversation and keep the chat screen clean.
Show icons with chat menu: You can display pre-configured icons associated with the chat menu options.

Add Menu Option

You can up to 5 menu options excluding the two default options – Chat Settings and Clear Conversation History.
Menu option settings:

Button Name: Set names for your menu options.
Action: Choose a triggering action between Path and URL.
Option Icon: Set a customized icon for your menu option.

Website Theming

Introduction

Branding and theming enhance the look & feel of the bot and that adds to the overall user experience. Orai provides a range of configuration options to customize the look & feel of the website widget for your Chatbot. This includes placement, header colours, text style &colour, and more options which will go a long way in helping you get the right look & feel.

Availability

This functionality is available to all users irrespective of plans except Theme font, Font weight, Header Alignment, Header Description, Background, Input Area Colour and Input Area suggestion text which are available from the Professional Plan onwards.
To access this function follow the steps below
Click on Configure
Select deployment
Click on “Edit Settings’ on the Website Chatbot and then click on ‘Display Settings’ in the bottom right corner.

Style your chat window. Use images and colours that reflect your brand.

Style

Theme

This option allows you to set a background theme from a set of pre-defined themes for your chatbots over the website.

Chat Header:

• Font – A bot builder can select the font style of the chat widget for their website. There are 15 options to select from
•  Font Colour: This is the colour selection for the text displayed in the header.
• Alignment: This aligns the header text. There are two options left-align and centre-align.
• Background colour: This is the colour of the background that the header is present in.
• Header Text: The user can add text as a description for the bot. This will be displayed on top of the widget.
• Header Icon: The icon beside the Header text in the bot can be configured from this option.

Chat Background

Background Type– You can select the background type to be anyone from a list of none, image, gradient and video. The UI adjusts and lets you upload the required media accordingly.

Response messages

Avatar – This lets you upload an image that will be used as the Avatar for when the bot sends a message.
Text bubble color: This lets you select the color of the bubble that the bot’s message will be displayed in.
Text Color: This lets you choose the color of the text that the bot’s messages will be in.
Buttons color – This lets you select the color that the buttons sent by the bot would appear in.

User messages

Text bubble colour – This lets you select the colour of the bubble that the user’s message will be displayed in.
Text colour: This lets you choose the colour of the text that the user’s messages will be in. iii) Reply area suggestion text: This lets you input text that will be displayed to the user in the reply area.
Reply area background colour – This lets you select the colour that the reply background area will be in.

Layout

Launch Icon: This lets you upload an image that the chatbot launch icon would then have. Chat close button: This lets you pick whether you want the chat close button to be on the top or at the bottom. Chat menu: You can opt to have a chat menu if you’d like. It would be displayed at the left end of the reply area. Once you have added a chat menu, you can add multiple buttons to it. The buttons will have the following fields:
Button name: Enter the name that you wish the button to have in this field. 2. Action: You can choose either to trigger a path or an external web URL at the click of the button. 3. Path/URL: Select the name of the path that you’d like to trigger with the click of the button in case you have chosen path as the action or enter a web URL that you’d like to open in case you have chosen URL as the action.

Launch Screen

Show Launch screen before the conversation: You can check this box if you want the chatbot to display a launch screen before the user has sent a message to the bot. If you decide to have the launch screen you can then configure the following parameters:
Show Agent Profile and Availability: Check this box if you’d like the launch screen to display the online agents that a user can interact with.     Show Agent Responsiveness: This text can be used to let the users know how soon they can expect to be attended to. 3. Agent Responsiveness Text: This is the text that will be displayed about agent responsiveness. 4. Query Card Title: This is the text that will be displayed as the title of the second card i.e. Query Card. 5. Query Placeholder: This is the text that will be displayed on the reply area of the query card.

Add New Card: This button allows you to enter a custom new card to the launch screen. The card can be configured with the following parameters:
Card Text: This will be the heading that’s displayed on the card. b. Card Action Title: This will be the text that’s displayed on the action button on the card. c. Card Acton Type: You can select to either trigger a path, open a web URL or trigger an FAQ d. Path/URL/FAQ: You can select the path you want to trigger or the web URL that you wish to open or the FAQ that you need to answer depending on the Card Action Type that was selected.

Settings

Chat Auto Pop-up: Enable this option to greet your website user with an immediate message pop-up. You can configure the following fields under it.1. Trigger: You can either set the trigger to immediate which makes the auto pop-up as soon as the webpage has finished loading or you can set it to delayed which introduces a delay in the pop-up. If you choose delayed you can then configure the delay in seconds under the delayed by field. Type: You can pick one type from Closed call out, minimized and normal.
Notify users via sound on new messages from agent: When in live chat, the user leaves the active page with the chatbot to browse other tabs or websites. They will hear the beep sound on the first unread message. This sound will only be played once and not on every new unread message, so as to make the user aware that an agent has sent a new message and also cause minimal distraction.
Enable fading-in of new messages: Enabling this option will ensure that the messages and options in the chat bubble, appear one after another each in a separate line fading-in. This behaviour will increase the time taken to load all the chat bubbles and will only be applicable for the Website chatbot widget and not on the Standalone bot or other social channels.
Edit Previous User Message: Enabling this option allows bot users to modify their previous response to the bot. You can configure the following field by checking this box:
Default Response: This is the message that will be displayed when the user clicks on the change response. You can enter text up to 100 characters.
Enable Voice Input: This allows users to interact with the bot using voice inputs. This feature is currently only supported for chrome browsers.
Enable Voice Conversations with Bot: When enables bot can have voice conversations with the users by listening for voice inputs and speaking back. By checking this box you can configure the following field:
Enable Continuous Voice mode: When enabled the bot can have a continuous conversation without switching to text mode after each message. By checking this box you can configure the following fields:
Voice Response Gender: You can select between a male or a female voice for the bot. b. Phrase Hints: You can enter up to 10 custom keywords or phrases that need to be recognized by the Voice Engine. For example domain-specific keywords like brand/product names etc.

 

Custom buttons and Deep linking

Deep Linking

We have exposed a few functions that customers can use directly on their websites to stimulate some actions.
window.EngtChat.open() → Open the bot
window.EngtChat.close() → Minimize the bot
window.EngtChat.sendQuery(‘any string here’) → Open the chat widget and trigger a path when a user clicks a specific button on the website.
To enable the deep linking feature without needing to call the above functions, we need to add a custom script for the customer’s bot from MA under display settings:

The custom script:
JS
window.addEventListener(“hashchange”,(event)=>{
constlocationHash=location.hash;
if(locationHash){
const query =location.hash.substring(1);
const prefix =query.split(“-“);
if(prefix[0]===”engt”){
if(locationHash===”#engt-chat-open”){
window.EngtChat.open();
}elseif(locationHash===”#engt-chat-close”){
window.EngtChat.close();
}else{
const[,…message]= prefix;
const elements =Array.from(
document.querySelectorAll(`[href=”${locationHash}”]`)
);
if(elements?.length){
if(elements[0]?.getAttribute(“data-engtHashListener”)!==”true”){
elements.map((el, i)=>{
if(i===0)el.setAttribute(“data-engtHashListener”,”true”);
el.addEventListener(“click”,()=>{
window.EngtChat.sendQuery(message.join(” “));
});
});
window.EngtChat.sendQuery(message.join(” “));
}
}else{
window.EngtChat.sendQuery(message.join(” “));
}
}
}
}
});

Now, customers can simply have anchor tags on their page with an href equal to one of the following to trigger certain things. Shopify customers can just add these href values to any element from their shopify portal itself:
#engt-chat-open : : clicking on an element with this href will open the bot.
#engt-chat-close : : clicking on an element with this href will close the bot.
#engt-<any faq here> :: clicking on an element with this href will trigger an faqon the bot.
For example, if the href is #engt-about-us, the message “about us” will be sent to the bot and it will execute any faq matching this query, so now customers can directly trigger any path in the bot by clicking on buttons/elements on their website by simply setting up an FAQ for the path and attaching the same faq to the href of any element on their website in this format #engt-<faq>.

Website Advanced

Launch Configurations

Below is the list of configurations supported while launching the website chatbot

Launch with a Delay

You can add the below line in the script and it will help you launch your bot on your website with a delay you configure here.
setTimeout(function(){ chatWidget.launchBot(); }, 3 * 1000);
(Note: This will add a 3 seconds delay before launching the widget.)

Trigger a Path while launching Chatbot

Typically, the launch flow on the Orai Chatbot begins with the Welcome New User or Greet Returning User path. But if you would want the bot to start with a particular path, you can follow the below steps:
Chatbot Widget invoked using Script
launch_flow: “PATH_KEY”
See below for an example to add launch_flow to the script.
{bot_key:“DDDxxxKEY”,bot_name:“SampleBot”,launch_flow:“D8E2CC7E37F04FEB802F45E8F49E4598”, branding_key:“default”}
Website Chatbot using Direct URL
And below on adding it to the direct URL:
launch_flow=PATH_KEY

To get the path key, Go to Build > Paths and to the specific path that you want to trigger.

Once there click on ‘Edit Path’ from the floating menu and copy the path key from the modal box that shows up.

Set Attribute

Not every piece of information can be precoded in a bot some data are dynamic and are needed to be passed from the website you are deploying your bot on. Like with configuring the path that you want to start from, you can set attributes both while launching the chatbot widget within your webpage or as a direct URL.
Chatbot Widget invoked using Script
You can set attributes from the script itself and configure its value as static data or dynamic (using a javascript variable in place of the value).
Note: This attribute can be a new attribute or an existing attribute on the bot.
While invoking the Chatbot widget using the Javascript on the webpage, use the format below.
“user_attributes”:[{“name”:”Fruitname”,”value”:”Apple”},{“name”:”Carname”,”value”:”Ford”}]
Example

html
<script>!function(e,t,a){var c=e.head||e.getElementsByTagName(“head”)[0],n=e.createElement(“script”);n.async=!0,n.defer=!0, n.type=”text/javascript”,n.src=t+”/static/js/widget.js?config=”+JSON.stringify(a),c.appendChild(n)}(document,”https://app.Orai.com”,{bot_key:”236264a2d4994d3f”,welcome_msg:true,”user_attributes”:[{“name”:”Fruitname”,”value”:”Apple”},{“name”:”Carname”,”value”:”Orange”}],branding_key:”default”,server:”https://app.Orai.com”,e:”p”});</script>

Website Chatbot using Direct URL

In the bot direct URL, some optional parameters can be appended while launching the bot.
Parameters that you can pass
&launch_flow=<Launch_Flow>&data_attrs={key1=val1::key2=val2}
Example
https://app.Orai.com/static/standalone/standalone.html?bot_key=51088b9bf4624fd6&launch_flow=welcome_82361&env=p&data_attrs={name=John::surname=Paul}
“launch_flow” will help start the bot on a particular flow.
“data_attrs” can be used to pass some data attributes while launching the bot.

Parameter to override Autopop on different web pages

To override, please use the ‘override_pop_up’ attribute while injecting the script into the webpage. By default, the behavior will be as configured in the deploy section for the chatbot.

Feel free to reach out to support@orairobotics.zohodesk.com in case you face any issues.