Vertical and horizontal offset of the Zendesk Chat widget

Issue symptoms

After adding Zendesk Chat on your website, you notice that the chat widget covers some important buttons on your page. 

Tip: This article details the step for offsetting your Chat widget. Determine if you have the Chat Widget or the Web Widget by referencing this article: Which widget do I have with my Zendesk account and website?

Resolution steps

Use our API codes to move the widget either vertically or horizontally or both. This is what we call offsetting the button and window from the edge of the browser window or mobile app window. This article will cover how to offset your widget button and widget window from the default position. 

• Vertical offset

• Horizontal offset

• Mobile offset

Important: Before you begin, add the widget to your site by embedding the widget script in the HTML source code of one or more pages. Then, add the customization codes listed in this article in addition to your embedded chat widget script.

Vertical offset

This API code sets the vertical offset of the chat button from the edge of the browser window:

<script type="text/javascript">
$zopim(function() {
$zopim.livechat.button.setOffsetVertical(50);
});
</script>

You can change the number inside () depending on your needs.

The default position of the chat button is on the bottom-right corner of the page. Applying the vertical offset code results in the button moving vertically towards the top of the page. 
 

This API code will vertically offset the chat window together with the chat button:

$zopim.livechat.window.setOffsetVertical(50);

You can change the number inside () depending on your needs.

The default position of the chat window opens from the bottom of the page. After applying the API code, your chat window will now open a specified distance from the bottom of the page. 
 

Horizontal offset

Use this API code to set the horizontal offset of the chat button from the edge of the browser window:

<script type="text/javascript">
$zopim(function() {
$zopim.livechat.button.setOffsetHorizontal(50);
});
</script>

You can change the number inside () depending on your needs.

Applying the horizontal offset button code results in the button moving horizontally towards the left side of the page. 

 

This API code will horizontally offset the chat window:

$zopim.livechat.window.setOffsetHorizontal(50);

You can change the number inside () depending on your needs.

Applying the horizontal offset window code results in the window moving horizontally towards the left side of the page:

 

Mobile offset

You can also offset for the Mobile chat button and window using the API codes below:

 <script type="text/javascript">
$zopim(function() {
$zopim.livechat.button.setOffsetVerticalMobile(30);
$zopim.livechat.window.setOffsetVerticalMobile(30);
$zopim.livechat.button.setOffsetHorizontalMobile(30);
$zopim.livechat.window.setOffsetHorizontalMobile(30);
});
</script>

You can change the number inside () depending on your needs.

For more information, see the Javascript API.