Add the widget to your website
Let website visitors chat or talk with your agent.
The web widget adds a chat and voice button to your website. Visitors can type to your agent or talk to it through their browser.
Before you start
Test your agent first. Once the widget is on your site, any visitor can talk to your agent.
Turn on the web widget
Enable the channel
Open the agent, select the Channels tab, and select Enable on the Web widget card.
If you chose the web widget when you created the agent, it's already enabled.
Open the install details
Select Settings on the Web widget card. Here you'll see:
- Conversation mode: whether visitors can chat only, or chat and talk.
- A preview of the widget. Try different colours and light or dark styles, and see how it looks on desktop and mobile.
- The installation code for your website.
Copy the installation code
Under Custom website, select Copy install code.
The code shown on screen hides part of your key, but the copied code is complete and includes your appearance choices.
Paste it into your website
Paste the code into every page where you want the widget to appear, just before the closing </body> tag.
If someone else manages your website, send them the code with these instructions.
Check it works
Open your website in a new browser window. The widget should appear in the corner of the page. Send a message, or start a call if voice is turned on.
Adding the code on popular website builders
Most website builders have a place for custom code that runs on every page. Look for a setting named something like Custom code, Code injection, Embed code or Footer code, and paste the installation code there.
Chat only, or chat and voice
A widget set up for Chat & voice lets visitors talk to your agent using their microphone. Their browser will ask for permission the first time.
A chat-only widget can't be switched to voice. To add voice, disable the web widget and select Enable again. Widgets enabled from the Channels tab support chat and voice. Afterwards, copy the installation code again and update your website so it has the latest version.
Turning the widget off
Select Disable on the Web widget card. The agent stops taking new conversations from your website straight away. Your other channels and Test Mode keep working.
You can leave the code on your website or remove it.
For developers: identifying signed-in visitors
If your website knows who the visitor is, set window.telikWidgetUser before the widget loads to link conversations to that user. Otherwise, Telik uses an anonymous ID for each browser.