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