Vertical and horizontal offset of the Zendesk Web Widget (Classic)

Issue symptoms

After adding the Web Widget (Classic) to my website, I notice that the widget covers other buttons on the page. 

Tip: This article details the step for offsetting the Web Widget (Classic). Determine if you have it 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>

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

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>

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

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

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>

Change the number inside () depending on your needs.

For more information, see this article: Javascript API.