How do I change the position of the chat launcher?

Why would I change the launcher's position?

The default bottom-right position works for most sites, but you might move it if:

• It overlaps another fixed element on your page, such as a cookie banner, a "back to top" button, or a different chat or support widget.
• It covers content your visitors need to see or click, like a checkout button or a sticky footer.
• Your site's layout or brand style calls for the launcher on the opposite side, or in a different corner on specific pages or templates.

How do I change the position of the chat launcher?

There are three ways to set the launcher's position. Use the one that matches what you're trying to do:

• Theme settings: sets the default position for every page where the widget appears.
• Script tag attribute: sets the position at install time, and can override the theme default on a specific page.
• JavaScript API: changes the position at runtime, for example in response to a user action or page state.

Note: If you use more than one of these methods, the setting applied last on the page generally wins. If your launcher isn't moving where you expect, check whether another method is also setting a position. See "Why isn't my position change showing up?" below.

Method 1: Theme settings

This sets the default launcher position across your site.

1. Go to Chat agent in Assembled.
2. Select the Theme tab.
3. Under Launcher, open the Launcher position dropdown and choose Bottom left or Bottom right.
4. Select Save changes.

Method 2: Script tag attribute

Add data-launcher-position to the script tag that installs the chat widget. This is useful when you want a specific page or template to differ from your theme default.

<script
  src="<https://cal.assembledhq.com/static/js/public-chat.js>"
  data-company-id="YOUR_COMPANY_ID"
  data-launcher-position="bottom-right"
  defer
></script>

Valid values are bottom-right, bottom-left, top-right, and top-left.

Method 3: JavaScript API

Use setPosition to move the launcher after the page has loaded, for example to reposition it based on user state.

window.assembled.setPosition({
  anchor: 'bottom-right', // 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
  offsetX: 25, // px from horizontal edge
  offsetY: 25 // px from vertical edge
});

Important: window.assembled isn't available until the widget script has finished loading. Calling setPosition too early causes an error such as Cannot read properties of undefined (reading 'setPosition'). Wait for the widget's load event, or check window.assembled.isReady(), before calling setPosition.

Why isn't my position change showing up?

If you've set a position but the launcher still appears in the old spot, work through these checks in order:

1. Confirm you saved and published the change. Saving a setting in Assembled or in your site's theme editor doesn't always push it live right away. If your site is built on a platform like Shopify, you may need to publish or republish the theme before the change appears on the live page.
2. Clear your cache and reload. Browser or CDN caching can serve an older version of the page after a change.
3. Check for a conflicting method. If a script tag attribute or a setPosition call is also setting the position on the same page, it can override your theme setting (or vice versa, depending on load order). Confirm only one method is actively setting a position, or that they all agree.
4. Check the browser console for errors. An error like Cannot read properties of undefined next to setPosition means the call ran before the widget finished loading. See the Important note above.

Questions? Contact support@assembled.com and we'll be glad to help.