Follow These Simple Steps to Setup and Install Your Web Widget

Preparation

Before installing the CINNOX widget on your website, we recommend organizing your setup first. This ensures everything is ready to go the moment you install.

To be prepared, have a list of the staff you want to set up accounts for. Note which types of inquiries they will handle. Afterward, you will create tags and customize the appearance of your widget.

‍

Helpful Preparation Checklist:

• Gather Staff Assets: Collect photos, corporate logos, and icons.
• Check File Size: Maximum file size for images is 100KB.
• Verify Format: Use JPG or PNG formats only.
• Check Resolution: Recommended resolution is 160px x 160px.
  • Note: Larger images may be compressed, which can make graphics look squished.
• Resize if Necessary: If files are too large, use a free tool like TinyJPG.
  • (CINNOX is not associated with tinyjpg.com).

Create staff accounts

Path: Contact Management > Staff Management > Create Account

Staff accounts represent the users on your CINNOX platform. There are two primary roles:

• Agents: Customer service operators who handle live inquiries.
• Admins: Users who can create new accounts and access detailed data insights.

‍

Mandatory Fields:

• First name.
• Last name.
• Email address.
• Role (Admin or Agent).
• Display Name: This is the name customers see when chatting with the agent via the widget.

Create destinations

Path: Destination > Create a Destination

Destinations are groups or teams that manage inbound inquiries. You will eventually link these to a "Corporate Tag" on the widget. When a customer clicks a tag, they are routed to a specific destination.

‍

Input Fields:

• Destination Name: For internal reference (e.g., General Support, HR, Web Support).
• Support Language: Routes traffic based on language. For example, a user with an Italian browser setting is routed to Italian-speaking agents.
• Support Location: Routes traffic based on the user's location to agents suited for that region.

‍

Example:Imagine you sent a batch of faulty products to Labrador, Canada. You could set up a specific tag called “Returns” on your global website. By configuring the Support Location for “Canada > Newfoundland and Labrador,” all chats from that region go to agents specialized in those specific returns.

• Destination Rules: Select Staff List from the dropdown, then choose one or more staff members under Endpoint.

Create corporate tag

Path: Channels > Create a Tag

Tags are the options customers see on your widget. They use these to start a live chat or web call. Each tag links directly to a support destination.

‍

Input Fields:

• General Function: Choose if customers can "Call & Chat," "Just Call," or "Just Chat."
• Tag Default Name: The internal name for the tag.
• Upload an Icon: Customers see these icons when they open your widget.
• Display Name: The public name customers see (e.g., "24/7 General Support" or "Speak with HR Now").
• Destination: Select the destination you created earlier to route the traffic.
• Sticky Routing: Enable this to bind agents to customers. If a customer clicks the tag again later, they reconnect with the same agent who helped them previously.

Customise the appearance of your widget

Path: Administration > Appearance > English (default)

‍

Any changes made here affect the English version of your widget. You can adjust other languages at any time.

• Enterprise Name: This is displayed when customers open the widget. You can use up to 40 characters, but only the first 14 characters show clearly.
• Master Colour: This color appears on your main header and on buttons, such as the "Exit Chat" button.
• Widget Icon: This is the icon customers click to launch the widget on your site. You can use your company logo, a mascot, or a chat icon.
• In-call Video / Image: Replace boring hold music with promotional content. You can upload a 1-minute video or a still image to promote new products while a customer waits.

Installation

Path: Installation

To complete the setup, follow these steps:

1. Go to the Installation section.
2. Click Copy on the code box.
3. Paste the code into the HTML source code of your website.
4. Place it immediately before the closing </body> tag.
5. Ensure the snippet is inserted on every page where you want the widget to appear.

Special Instructions for CMS Platforms:

• For WordPress, Drupal, and Joomla, please visit our Document Centre.
• If you are deciding between platforms, see our comparison article.