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

Widget Position

Below is an example of the CSS snippet to be added to the <head> tag that allows you to move the widget's position within the website.

<style type="text/css">
      /* FOR HEYDAY WIDGET  */
      :root {
        --HeydayStartIconHorizontal: 30px; /* Arbitrary value, can be modified */
        --HeydayStartIconVertical: 30px;   /* Arbitrary value, can be modified */
      }
      
      #HeydayStartIconContainer {
        left: var(--HeydayStartIconHorizontal) !important;
        bottom: var(--HeydayStartIconVertical) !important;
      }
      
      #HeydayStartIconClose {
        left: calc(5px + var(--HeydayStartIconHorizontal)) !important; 
        bottom: calc(90px + var(--HeydayStartIconVertical)) !important; 
      }
      
      #chatWindow {
        left: calc(20px + var(--HeydayStartIconHorizontal)) !important;
        bottom: calc(20px + var(--HeydayStartIconVertical)) !important;
      }
       /* Heyday widget chat window full screen on mobile devices */
    @media screen and (max-width: 479px) {
      #chatWindow.heyday-chat {
        max-height: unset !important;
        height: 100% !important;
        width: 100% !important;
        right: 0 !important;
        bottom: 0 !important;
      }
</style>  

The code snippet above shows how to position the widget to the bottom left of the page.

The classes and IDs mentioned above must be preserved to reference the web chat and messenger floating button.

How to Modify the Widget's Position

The following parameters can be adjusted as needed:

Positioning properties

  • The position properties are top, bottom, left, right. In the example above, we're setting the position at the bottom left.

Positioning values:

  • HeydayStartIconHorizontal,

  • HeydayStartIconVertical

If not already present in the HTML's <head> tag, the following must be included:

<meta name="viewport" content="width=device-width, initial-scale=1">

PreviousAdapted script format for Google Tag ManagerNextWidget Appearance

Last updated 3 years ago

Was this helpful?