How do I install the webchat widget?

Required information. Installing the widget. Minimum vs complete.

This article is the second part of the instructions for setting up webchat for your LeadDesk environment. Make sure you have completed the steps in the article How do I set up webchat? before continuing.

Information you need

Before you begin, there are two pieces of information you need from your LeadDesk environment.

• If you haven't already, copy the Connector Id from the inbound route you created for webchat in LeadDesk, and paste it to a text file.
• You will need to know the region for your LeadDesk environment. Log in to your admin account, and check the address. Make a note of the three characters after login-. For example, in this screenshot, the region is nor.

Installing the widget

To display the webchat widget on your site, you will need to add some JavaScript to the webpage. There are two versions of this code available from the LeadDesk support pages:

• The minimum version which includes only default styles.
• The complete version which is customisable.

Whichever version of the code you choose, the script should be pasted after the </body> tag of the page you wish to display it on.

Customising the widget

The level of customisation available for the widget, depends which version you use:

• The minimum version of the widget installs the default colours, styles and formatting. The only changes you will need to make to it are described in the Connecting to LeadDesk section, below.
• The complete version of the widget allows almost complete control over the look and feel of the webchat widget, allowing you to brand it with your corporate colour scheme and logos, among other things. Full details can be found in this article on the main support pages. (Look for the attachment at the bottom of the page).

Connecting to LeadDesk

The changes you must make to the widget's script allow you to complete the connection to your LeadDesk environment.

src 

• Replace WEBCHAT_CONNECTOR_URL in the script with one of the URLs here. Choose the address for the region of your environment.
  • NOR →  https://ld-webchat.leaddesk.com/nor-production-main.js
  • CEU → https://ld-webchat.leaddesk.com/ceu-production-main.js
  • QED → https://ld-webchat.leaddesk.com/qed-production-main.js
  • CE2 → https://ld-webchat.leaddesk.com/ce2-production-main.js

data-connector-id

• Replace ROUTE_CONNECTOR_ID in the script with the Connector id from your inbound route.