Create a Custom Widget Icon

Create a Custom Widget Icon

The Talkative chat widget features a no code editor where you can customize your chat widget icon, however, in some
instances, you may wish to have something more bespoke. 

You can build your own icon using any stack you wish, and register event listeners to trigger our API to toggle the visibility of the widget UI.

Once you have created your icon, you would just register an event listener and call this code when the button is clicked.

However, you should first check to make sure the widget has loaded correctly and that there are queues available for the cards configured for your widget. In addition to this, you will likely want to hide the icon when the UI is active, and show it again when the UI becomes inactive.

We have created a heavily commented example application which illustrates a potential implementation method you might use to accomplish this. You can find this example here: https://github.com/talkative-tech/widget-examples/tree/main/custom-widget-icon

This example can be cloned from the GitHub repository and installed and tested locally by updated the config UUID to point to your own. Full instructions can be found in the repository.