JavaScript Code Injection - Help Center

You can add custom JavaScript code snippets to your agent widget. This can be useful for things like:

Adding website analytics code snippet

Injecting a Google Tag Manager script

Programmatically interacting with the chat widget elements

💡

This feature works only in embed and popup (not API or messenger app integrations) and is available to Chatwith Business customers.

Adding code

To add custom JavaScript code to your agent widget, head to your Dashboard → White Label section:

You can enter any “vanilla” JavaScript code, just like you would in a HTML file between <script>...</script> tags.

The code will be added as the last element, right before the closing body tag.

⚠️

The code entered in the field should be only JavaScript, without the <script> tags. If you have a code snippet that includes <script> tags, you will need to wrap it in a string or, if possible, remove the tags. See examples below to learn different approaches to adding pre-generated code snippets.

Examples

Google Tag Manager

You can inject a Google Tag Manager and through it implement various other features like Google Ads conversion tracking, Google Analytics etc. To do so, you would copy & paste this code snippet and edit the GTM-XXXX value to your GTM specific code.


(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXX');

💡

At the moment Chatwith can support only GTM code snippets for browsers with JavaScript enabled.

Plausible analytics

You can add simple GDPR-compliant web analytics like Plausible to your agent widget. This is especially useful for tracking visits to your agent if you share it using a link.

To add Plausible, copy your code snippet from the dashboard and paste it like this:


const script = '<script defer data-domain="example.com" src="https://plausible.io/js/script.js"></script>';
document.body.innerHTML += script;

⚠️ Notice that we wrap the code in a string and then inject it into a script. Replace example.com with the domain of your website, as set in Plausible.

Always clear conversation history

You can automatically delete the conversation history each time the chat widget is opened. This can be done by adding a code snippet that “clicks” the reload button. Here is the code:


document.getElementById('chatwith-chat-header-clear-conversation-button')?.click();

You can create a similar code to find and interact with other elements of the chat.