Customizing the Widget on a Webchat Campaign

Omnichannel Webchat campaigns use a widget that is displayed on your website. Using the following guidelines and procedure, the widget's appearance can be customized.

1. Button Customization
2. Tab Customization

A customer wishing to initiate a webchat clicks the button* in the bottom right corner of the webpage.

*default style

Which brings up the chat window:

You have the option of changing the look of the button, or using a tab instead.

1. Button Customization

A custom button must adhere to the following:

• image format: JPG, PNG, or GIF
• image size: 200 x 200 pixels

To swap out the default button image:

• Open the html file for your page*
  *This article assumes that the SingleComm plugin and app token have already been added to your page. If not, simply follow the instructions lister here to configure a webchat campaign.
• Add the following code underneath line 13:
  
  • displayStyle: button
  • buttonIconUrl: location of your hosted image file

The new button image will appear on your page:

Button images are always round. If your hosted image is square, the corners will be rounded when it appears on your page.

2. Tab Customization

If you prefer, the default button can be changed to a tab that will appear in the bottom right of the webpage.

Clicking this tab will expand the chat window:

To replace the default button with the above tab:

• Open the html file for your page
• Add the following code underneath line 13:
  
  
  • displayStyle has been changed from "button" to "tab"
     You can also change the default text and color!
    The customText: headerText/ inputPlaceholder/sendButtonText can also be edited here, along with the customColors: brandColor/ conversationColor/actionColor