LogoLogo
ENGLISH
ENGLISH
  • Hey, you're here! Welcome to Heyday's Help Centre
  • ⬇️ Download the Heyday App!
  • πŸ‘₯TEAMMATES
    • πŸ‘©β€πŸ’»My Profile
      • ✏️My Preferences
      • πŸ””My Notifications
    • πŸ”My Password
    • πŸ“šUnderstanding the Inbox
      • Primary & Other
        • New Requests
        • Open Conversations
        • Assigned to Me
        • ⭐Starred
        • πŸ€–Chatbot Conversations
        • πŸšͺClosed Conversations
      • Filters
        • Status
        • Channel
        • Assignee
        • Department
      • Greyed Out Conversations
    • πŸ’¬In Chat
      • πŸšͺClose Conversation
      • ⭐Priority
      • ↔️Reassign to Another Teammate
      • 🏬Assign to Another Department
      • πŸ—’οΈInternal Notes
      • β›”Conversation Blocking
      • πŸ“œTemplates
      • πŸ”ŽProducts
      • πŸ“²Start a call/Video chat
      • 😁Emojis
      • πŸ“ŽAttach Files & Images
      • πŸ«‚Customer Insights
  • πŸ‘€ADMINISTRATORS
    • πŸ“ŠAnalytics
      • Overview
        • Customer Overview
        • Conversation Overview
        • Chatbot Performance
      • Conversations
      • Team Performance
      • Advanced Reports
        • Conversations Report
          • Conversation Score
        • Department Report
        • Team's Report
        • Dialog Performance Report
        • Product Analytics Report
      • Flow Definitions
        • Campaign
        • Transfer
        • Sales
        • Support
        • Other
    • βš™οΈSettings
      • General
        • Chat Display
        • Business Hours
      • Chatbot & Automation
        • FAQ Builder
        • Enterprise FAQ Editor
          • How to use CSV files
      • Team
      • Channels
      • Account
        • Notifications
      • Advanced
        • Secret Sharing
    • ✨Best practices
    • Assigning a conversation
    • How to Make a Teammate become an Administrator
    • Email - Teammate Performance Export
  • πŸŽ›οΈ CHAT SETUP
    • Overview
    • Heyday Chat
    • The Code Snippet
      • Integration in the HTML code
      • Integration through a Google Tag
    • Customizing your Chat
      • Configurable Attributes
        • Client ID
        • Country
        • Flow Referral
        • Automatic Department Assigning
        • Widget State
        • Greeting Message
        • Delay Close
        • Minimizable
        • Set Cookie Rules
          • Cookie Expiry
          • Cookie Consent
        • Passing Client Data Post-initialization
        • Adapted script format for Google Tag Manager
      • Widget Position
      • Widget Appearance
    • Event Tracking
    • How to Integrate Heyday Webchat into a Native App
    • How to Integrate Facebook Chat if you Already Call the SDK
  • πŸ”—CHANNELS & FEATURES
    • Channels
      • Heyday Chat
      • Facebook Messenger
        • Creating a Facebook Pre-Production Business Page
        • Facebook Guest Mode
        • Flashing Messenger Chat Window
        • Facebook Self Onboarding
      • Google Business Messages
        • Non-Local Entry Points
        • Connecting your Google Account
      • Instagram
        • Creating an Instagram Business Account
        • How to Grant Access to Your Instagram Account
        • Instagram Self Onboarding
      • WhatsApp
        • Security Prerequisite
        • WhatsApp Channel Setup
      • Email
        • Automatic Forwarding
        • Testing the Email Channel
        • Email Signature
      • Video Chat
        • Technical Requirements
    • Features
      • E-comms
        • Shopify
          • How to Create and Configure a Custom App
          • How to configure needed permissions
          • Locate the information Heyday needs
        • Magento
          • Integration requirements
        • PrestaShop
        • Salesforce Commerce Cloud
          • SalesForce Service Cloud
      • FAQ Automation
      • Product Search
      • Sales Attribution
        • Activating your Sales Attribution
        • Sale Attribution Report
        • Limitations
      • Store Locator
        • Store Locator - Self Onboarding
      • Continuous Conversation
      • Marketing Campaigns
      • Email Marketing & Newsletter
      • Order/Shipment tracking
        • Keep Your Customer Informed
        • How To Set Up a Notification Link
      • CSAT Survey
        • Chatbot CSAT
        • Teammate CSAT
      • Wait Time Management
      • Appointment Booking
      • Loyalty Program
      • Back in Stock Notifications
      • Price Drop Notifications
      • Product Recommendation Quiz
Powered by GitBook
On this page

Was this helpful?

  1. πŸŽ›οΈ CHAT SETUP
  2. Customizing your Chat
  3. Configurable Attributes

Adapted script format for Google Tag Manager

PreviousPassing Client Data Post-initializationNextWidget Position

Last updated 2 years ago

Was this helpful?

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 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>

Widget State