Velaro makes designing your inline chat windows a breeze! To get started simply log into the Velaro Control Panel with an administrative user, and navigate to the Admin > Design > Inline Chat section.

Live Preview

On the left of your page you’ll find a live preview of your chat window.



This preview will automatically update as soon as you make any change; this allows you to fully design the window without ever leaving the comfort the editor.

How to select sections to edit and configure

Your live preview is split up into multiple sections that each have their own set of configurations. To select any of the sections, simply hover over the live preview and you’ll see a dotted line representing that sections borders.



Click the area you’d like to configure and you’ll see the section just to the right will list all available options.



Before your start running, lets walk through some basics.

Colors – there are multiple sections of color that you can update to better match the look of your own website. Any color changing section will have a control like this:



This tells you both the area its linked to and the color of it. Please note that this control shows you the HTML color code as well as the visual color. Once you select this area a color picker will appear and you can move your cursor manually to the appropriate shade, or you can simply input the color code.


Expert tip! If you are going to use the same color in multiple places, just copy that HTML color code and paste it to the rest. Copy+pasting the color codes can be much quicker than finding it manually.


Text – there are several areas with editable texting including the general window title, the agent’s title, and the names of the function buttons. To update the text just replace the default text in the configuration section to the right.


Social Links – you’ll see by default at the bottom of your chat window some social media icons. These are meant to link to your company’s social media sites, if you’d like to use them and set them up simply click the section, and in the top right you’ll see a button for Set Up Links. Selecting that will take you to your Admin > Settings > Account page, where you can enter the URLs for those social media sites.


Once you’ve saved those URLs, head back to the Admin > Design > Inline Design page and re-select the social media section. Now just ensure that you have checked the sites you linked.


Warning! If the social media links are left enabled and have not been configured this will open a blank page. This can appear badly to a visitor, and the decision to enable or disable them needs to be made.

Don’t forget to take your goodies!

The inline chat window has a few extra features you can get from the designer.

Eye Catcher – Velaro’s Eye Catcher will appear just above your inline window when it’s minimized. This is to help attract the human eye towards your chat. To enable these, select the header of the chat window where you see the Online/Offline title. You should now see a check box to “Enable Eye catcher” just click that and you can set them up.



You can also select an offline eyecatcher to display if your chat is offline but would still like to attract people to leave messages. By default your account won’t have any set, so select the Change/Upload button to upload your own or to choose from Velaro’s public gallery.

Eye catchers can be closed by the website user in case the content gets in the way.

Language Quick Set – By default Velaro sets the text of your window to English. If you want to stick with our default phrasing and just quickly translate it to another language then simply just use the drop down language selector under your live preview.

Don’t forget to save!

Don’t let your hard work go to waste! Always select the Save Changes button at the bottom of the page before navigating away. Velaro will save your changes immediately and provision them to our servers ASAP. Typically you’ll see your changes appear less than a minute!