Shift up on all screen sizes

Use this code to shift the widget up. Replace the XX with the respective Client Code, get this from the Embed Code webpage within Yonder -> Settings -> Embed Code.

<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>

‍

Shift up on mobile only

If you've got a mobile friendly site that has a lower menu menu, you won't want the chat icon to sit on top of it.

Use this code to shift the widget up, only for mobile breakpoints. It'll stay in the same position for wider breakpoints. Replace the XX with the respective Client Code, get this from the Settings within the Yonder web app.

<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>

‍

You'll end up with the widget looking like this on the mobile breakpoint...