How to Adjust the Chat Widget's Position on Your Website

You can vertically adjust your Chat Widget to optimize your ChatBot's position on your website for web and mobile users.

Shifting the Widget Up on All Screen Sizes

If you need to shift the Yonder Chat Widget upwards on all screen sizes, use the following code snippet. Be sure to replace XX with your respective Client Code, which can be found in the Embed Code section under Chatbot > Website Widget > Install.

Code Snippet: 

<script>(function (w, d) { w.YONDER__CLIENT_CODE = 'XX'; var s = d.createElement('style'); s.innerHTML = "@media (min-width: 801px) {.YONDER_APP__wrapper .YONDER_APP__wrapper__frame {height: calc(100% - 180px);}} .YONDER_APP__wrapper .YONDER_APP__wrapper__frame {bottom: 160px;} .YONDER_APP__wrapper .YONDER_APP__display-button {bottom: 80px;}"; d.head.appendChild(s); })(window, document);</script>
<script src="https://widget.yonderhq.com/main.js" async defer></script>

This adjustment ensures the chat widget moves up consistently across all device sizes.

Shifting the Widget Up on Mobile Only

If your website has a bottom navigation menu on mobile and you want to prevent the chat icon from overlapping it, use the following code snippet. This will only adjust the widget's position for mobile breakpoints. It'll stay in the same position for wider breakpoints.

Code Snippet:

<script>(function (w, d) { w.YONDER__CLIENT_CODE = 'XX'; var s = d.createElement('style'); s.innerHTML = "@media (max-width: 800px) {.YONDER_APP__wrapper .YONDER_APP__display-button {bottom: 100px;}}"; d.head.appendChild(s); })(window, document);</script>
<script src="https://widget.yonderhq.com/main.js" async defer></script>

This ensures the chat icon remains visible but does not interfere with mobile navigation elements such as the Menu button in the example below: