Setup Web Chat on Website

Video Tutorial:

In order to implement Live Chat on your website, we provide you code to embed on any web page you want to launch live chat.

You will see your code when you login to https://raiabot.com/app under Integration > Chat

The code will look something like this:

<script
    src="https://raiabot.com/chat/chatbot-widget.js"
    data-apikey="33EB8303-A0F3-984B-FA43FF83ABD56BFB"
    data-view-type="2"
    data-fkid=""
    data-intro="Want to experience RAIA? Ask me anything!"
    data-context=""
    data-source=""
    data-delay-message=""
    data-delay-time=""
    data-exit-message=""
    data-hide-chat=""
    data-chat-appear-delay="20"
    data-fname=""
    data-lname=""
    data-email=""
    data-phone=""
    data-utm-source=""
    data-utm-campaign=""
    data-utm-content=""
    css-icon-bottom="30"
    css-icon-right="30"
    css-modal-bottom="90"
    css-icon-size="60" 
    data-use-page="1"
    chat-button-text="Book a Demo"
    chat-button-url="https://yourdomain.com/demo"
></script

More information on the Fields you Pass via the Javascript above:

SRC

(REQUIRED) The Path to the Chatbot Widget (this should be exactly how it looks when you copy and paste script from the RAIA App.

DATA-APIKEY

(REQUIRED) This is the API Key that is unique to the Bot. This also is pre-filled in when you view the script on the RAIA App.

DATA-VIEW-TYPE

(REQUIRED) Currently there are two different UX Designs to choose from. 1 or 2.

DATA-FKID

(OPTIONAL) This is an optional variable you can pass to identify the user who is on live chat. In some cases you would pass the internal ID of the user, so when you receive back the webhook you can know which User ID in your system to associate with the chat.

DATA-INTRO

(OPTIONAL) This is an intro message that will show up as a popup over the Live Chat and also as the default statement in the first window of the chat. This is useful if you want to personalize the chat for the specific user or include information you can feed via the javascript dynamically.

DATA-DELAY-MESSAGE

(OPTIONAL) This works similar to the intro message except there is a delay of 3 seconds (or customize via data-delay-time. Using this option also does not replace the default first screen in the live chat window.

DATA-EXIT-MESSAGE

(OPTIONAL) This is a message that is triggered when the user is existing the current webpage.

DATA-FNAME

(OPTIONAL) This is used to pass the First Name from your system to our system so it can be stored along with the conversation. This is helpful for when the conversation is sent back to you as an email or webhook - you can see who the person was in the chat.

DATA-LNAME

(OPTIONAL) Same as First Name above, but this is Last Name.

DATA-EMAIL

(OPTIONAL) Same as First Name above, but this is Email.

DATA-PHONE

(OPTIONAL) Same as First Name above, but this is Phone.

DATA-CONTEXT

(OPTIONAL) Context is the relationship between the user and the company. (This helps train the A.I.)

DATA-SOURCE

(OPTIONAL) The source of the information (Typically we suggest putting the website the chat is on)

CSS Style Sheet (Placement of the Icon)

    css-icon-bottom="20"
    css-icon-right="20"
    css-modal-bottom="90"

DATA-USE-PAGE

(OPTIONAL) The text content on the webpage that the chat is currently on will be passed into the context for the A.I. Assistant use in real-time training.

CHAT-BUTTON-TEXT

(OPTIONAL) Text on the button above the chat window.

CHAT-BUTTON-URL

(OPTIONAL) Link of the chat button above the chat window.

After you Embed Code

Once you implement the code the Live Chat will be available for any webvisitor to use. Any conversations that occur will be found in the RAIA app and summarized and scored.

If you want to test your live chat before launching live on your website, login to the RAIA app and click on the Bot you want to test, and then choose Test Chat.

This is an example of what it will look like once live on your website:

Chat Experience

Restricting use of Live Chat by IP Address

In order to ensure your web chat code won't function on other websites, you can whitelist the IP Address of your website in the RAIA App. Go to Bots > Options > Whitelist IP.