Follow These Simple Steps to Setup and Install Your Web Widget

17 November, 2021
Follow These Simple Steps to Setup and Install Your Web Widget

Table of Contents

  1. Preparation
  2. Create staff accounts
  3. Create destinations
  4. Create corporate tags
  5. Customise the appearance of your widget
  6. Installation



Before installing the CINNOX widget on your website, we recommend to organise all of your staff accounts, routing, support systems and the appearance of your widget first – so everything is ready to go upon installation.

To be prepared, have a list ready of the staff you want to set up accounts for and what type of enquiries they may handle. After that, we will move on to creating tags and the appearance of your widget.

You may choose to upload staff photos, your corporate logo, icons and other images along the way before installation. Here’s our quick guide for preparation:

Max file size for images: 100KB

Format: JPG or PNG

If your image file sizes are too big, you can use a free image size reducer such as:
**CINNOX is not associated with in any way.

Recommended resolution: 160px x 160px
*The system may compress images that are too large resulting in graphics that look squished.


Create staff accounts

> Contact Management > Staff Management > Create Account

Staff accounts are all your users of the CINNOX platform. There are two roles – admins and agents. Agents can be customer service operators who handle inquiries. Admins have access to create users and see detailed insights.

Mandatory fields:

First name

Last name

Email address

Role – either an admin or an agent

Display name – this is what your customers will see when they chat with this agent via the web widget.

HubSpot Video

Create destinations

> Destination > Create a Destination

Destinations are a group or team that manage inbound inquiries. These will eventually be linked to a corporate tag on the widget. Essentially, customers will click a tag on the widget and be routed to one of these destinations.

Input fields:

Destination Name – for internal reference. Eg; general support, HR, web support etc

Support Language – this will route traffic based on language. Eg, someone with their browser set to Italian would be routed to a destination of Italian speaking agents

Support Location – this will route traffic based on their location, to a destination of agents best suited to help that region.

For example, if you have a batch of faulty cheese dog bones sent out in Labrador, Canada, you could set up a specific tag called “Returning Faulty Cheese Dog Bones” on the widget of your global website. Configure the Support Location for “Canada > Newfoundland and Labrador” and this would connect all chats and calls from this tag to a destination of agents specialised in the returns and refunds of this specific batch of faulty cheese dog bones.

Destination Rules – select staff list from the Destination Type drop down, and then select one or more staff under Endpoint.

Follow These Simple Steps to Setup and Install Your Web Widget_pic_1

Create corporate tag

> Channels > Create a Tag

Tags are essentially the options customers can choose from on your widget to start a live chat or web call. Each one links to a support destination.

Input fields:

General function – assign each tag the capability for customers to either call & chat, just call, or just chat with the agent/s that are associated to this tag.

Tag default name –

Upload an icon – these icons are what customers can see when they open your widget, and one appears on each tag.

Input the display name for the tag – this is what customers will see. Such as “24/7 general support” or “Speak with HR now”

Destination – connect this tag with a destination that you previously created to route traffic

Sticky routing – enable this if you wish to create agent/customer binding for this tag. This means that if a customer was to click this tag again in the future, they would be connected to the same agent that helped them in the past.

See also: Smart routing and corporate tags explained

HubSpot Video

Customise the appearance of your widget

> Administration > Appearance > English (default)

All these changes will affect the English version of your widget. You can come back and make changes for the other languages, anytime.

Name of your enterprise

This is what customers will see when they open your widget. You can have up to 40 characters, but only 14 will show clearly.

Master Colour

This colour will be displayed on your main header (where the name of your company shows) and any buttons that appear (such as when a customer exits a chat).

Widget Icon

The widget icon is what your customers will see on your main website, and will click to launch the widget. You can use your company logo, mascot, chat icon, or any visual you wish to represent this.

In-call Video / Image

Bye-bye boring elevator music! This is an excellent way to promote a new product or service to customers after a call is launched. You can upload a 1-minute video, or a still image.

See more: How to customise the appearance and branding of your widget

HubSpot Video


> Installation

Under installation, click copy on the code box. Paste the code into the HTML source code of your web site right before closing tag. Insert the code snippet on every page where you want the web widget to appear.

HubSpot Video

For plugins on WordPress, Drupal, and Joomla – please visit our document centre.

Want to learn more about each CMS? See our comparison article.

Up Next: 3 use cases on transforming customer experience with the CINNOX web communication widget for live chat and web call


Leave a Comment