Chatwidget

Contact is only established when customers can actually find you. One way to make sure your customers can find you is using your company's central phone number which is already familiar to your customers. Another important way for customers to engage with you by whatsapp is by offering a Web Widget on your website that works as a Whatsapp launcher.

This web widget can be easily embedded on your website so people can always start a Whatsapp conversation with you or your colleagues by scanning the QR code or clicking on the link.

Instructions

Enable your web widget

  1. Go to Channels

  2. Click on Chatwidget

  3. Click on Enable

Configure the web widget

  1. Enter your domain name

  2. Optionally enable visitor tracking

  3. Click on Save

Provide your domain name without the www. and without the path /page/..Press 'enter' to add this domain and repeat if you want this widget to be used on more websites

Prepare implementation on your website

  1. Scroll down and click on the little clipboard icon to copy the widget HTML snippet to your clipboard.

  2. You can implement the widget code on your website or ask your website agency to do so when ever you feel comfortable with your bot. See the technical documentation for more instructions.

Make sure to paste the HTML snipplet right before the </body> tag.

Test your web widget

The design of your widget can be styled to fit your own brand requirements by the following steps. You can test the design

  1. Click on Design

  2. Check out the widget in here or

  3. Choose your website URL using "Select preview site" in the dropdown and click

  4. Share link to view the widget on top of your website

  5. Choose the alignment of your widget from bottom right, bottom left, top right, top left

Notice that the widget preview doesn't work on all websites when clicking share link. Some websites prevent loading inside an iframe for this function to work properly.

Design your widget

Now you can start changing the properties of your widget in order to fit your needs. See the below screenshot to understand which property affects which part of the widget.

Customize labels

When you click on Customize labels in the page on the screenshot above you will be able to make changes to the default labels that are rendered in the Chatwidget.

Last updated