Add Velaro to your website

To get Velaro up and running on your website you’ll need to install at least one script on any page that you’d like to have chat or visitor monitoring. To get the necessary scripts please log into the Velaro Control Panel and navigate to:


Latest User Interface

When you get to the Deploy dialog box you will have the option to select which chat mode to use on your site.  To get the code for a chat mode click on the desired option:

Insert script on website

Click "Copy" and paste the code just above the </body> tag on the website page where you want that to appear if you chose Inline or follow the instructions for the placement of the other options.

Legacy Designs

Inline Chat

1) Set inline chat engagement script options

Configure the engagement script options on the Engagement scripts options screen: https://app.velaro.com/#/admin/deploy/engagement-scripts

ControlDescription
Include inline chat on the pageThis will enable a chat window that is by default docked in the bottom right of your web page. Inline chat windows are given a fixed placement on the screen; it will follow the visitor as they scroll down a page.
Monitor visitorsEnables the website browser real-time monitoring features. The Velaro invitation and content targeting features require visitor monitoring to be enabled.
Assign to a group

If you’re deploying chat to multiple websites or divisions of your company, and have created groups to segment those, then you can automatically assign visitors and chats to that group. By selecting one of your groups, an additional Group ID variable will be added to your code snippet which automatically assigns visitors before the chat even starts.

Note: Assigning chats to a group directly within the engagement script will bypass the group routing rules for that group in the workflow.

GenerateGenerates the custom engagement script, see below


2) Click "Generate"


Once you have all of the desired options set, click Generate, and you’ll be given the code necessary to deploy.


This code will need to be copied and pasted in your website page’s HTML code, as low as possible. We recommend including the engagement script at the end of the body section of your website (before the closing body tag </body>)

3) Insert script on website

Click "Copy code to clipboard" and paste the code just above the </body> tag on the website page where you want that to appear.

If you want chat to appear on all pages of your website, then ...

If you want chat to only appear on specific pages of your website, then ...

Popout Button

To enable a popout chat that will open in a new window, you can deploy a button on your website that will open a new window when clicked. You will need the engagement script plus the popout chat button code.

1) Set popout chat engagement script options

Popout chat also requires the engagement script with the control "Inline chat on the page" unchecked (https://app.velaro.com/#/admin/deploy/engagement-scripts). This code will need to be copied and pasted in your website page’s HTML code, as low as possible. We recommend including the engagement script at the end of the body section of your website (before the closing body tag </body>)

2) Set Popout Chat button options

Generate the popout button code at Admin > Deploy > Popout Chat (https://app.velaro.com/#/admin/deploy/popout-chat)



ControlDescription
Group to assign visitors

Chats initiated when the button is click will be assigned directly to the specified group. 

Assigning chats to a group directly within the engagement script will bypass the group routing rules for that group in the workflow.

Online chat button imagesSettings that allow the upload and selection of the chat button image to be displayed
Offline chat button imagesSettings that allow the upload and selection of the chat button image to be displayed
GenerateGenerates the custom button code


3) Click "Generate"


Just like with the Engagement Scripts you have a few options you can predefine before the script is generated, including the same grouping option. Here you also define the chat button images that will be shown when the system is online (when agents are available) and when its offline. You can select to browse/upload to view our gallery of images or upload your own. Once you have everything set, click Generate.

4) Insert button code on website

Copy the button and paste it directly into the code on your website where you want the button to be displayed. You will still need to also place the engagement script at the bottom of the <body> section of your website HTML.

Once all of your code has been deployed you’ll be able to monitor visitors in real time and get chats based on the options you enabled in the steps listed above.