Create a Custom Widget Icon

Modified on Tue, 23 Apr at 9:50 PM

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.


Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select at least one of the reasons
CAPTCHA verification is required.

Feedback sent

We appreciate your effort and will try to fix the article