Comment on page
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.
The following parameters can be adjusted as needed:
- The position properties are top, bottom, left, right. In the example above, we're setting the position at the bottom left.
- 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">
Last modified 1yr ago