Adapted script format for Google Tag Manager

If you’re implementing these chat attributes in Google Tag Manager rather than directly in the CSS of your website, the Div function needs to be converted to a script because GTM does not accept the CSS format. Note that this script should be fired in a separate tag from the chat snippet that initializes the widget. This tag should be fired before the tag that initializes the chat since this tag tells the other how it should be loaded.

Here’s an example of that script already formatted, the values in line 4 would just need to be populated with the attribute you want to configure:

<script>
div=document.createElement("div");
div.setAttribute("id","hdAttributes");
div.setAttribute("attribute","attribute value");
document.getElementsByTagName("BODY")[0].append(div);
</script>

Here’s a completed example using the Widget State attribute:

The normal div function if we wanted the chat to open in the welcome state would look like the following:

<div id="hdAttributes" widget_state="welcome"></div>

The adapted script takes the attribute (widget_state) and the attribute value (welcome) and replaces the elements in line 4:

<script>
div=document.createElement("div");
div.setAttribute("id","hdAttributes");
div.setAttribute("widget_state","welcome");
document.getElementsByTagName("BODY")[0].append(div);
</script>

If you want to use a combination of attributes, they can all be added to the same script, just add another line using the same div.setAttribute configuration:

<script>
div=document.createElement("div");
div.setAttribute("id","hdAttributes");
div.setAttribute("attribute","attribute value");
div.setAttribute("attribute","attribute value");
document.getElementsByTagName("BODY")[0].append(div);
</script>