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">
Adapted script format for Google Tag Manager
Widget Appearance
Last modified 1yr ago