The widget is a small JavaScript file you paste into your website. When a visitor clicks the floating button, a panel slides up and they can join your queue without leaving the page.

Install the script

You need one <script> tag. The only required attribute is data-queue-id, which tells the widget which queue to join.

  1. In the admin, open the queue you want to embed and copy its queue ID.
  2. Paste the snippet below into your site, ideally near the closing </body> tag. Replace QUEUE_ID with the ID you copied, and point the src at wherever MakeTheQueue is hosted for your account.
  3. Publish the page and load it in a new tab to confirm the floating button appears.
<script src="https://yourhost.com/widget.js" data-queue-id="QUEUE_ID" data-api-url="https://api.yourhost.com"></script>

data-api-url is optional. If you leave it off, the widget defaults to the same host on port 3001.

What customers see

The widget renders a small floating button in the bottom-right corner of the page. It uses your organization's primary color (set on the queue's widget config) and shows a clipboard icon.

Clicking it opens a 360px slide-up panel with these fields: First Name (required), Last Name, Email, Phone, Date of Birth, Party Size (1 to 20), and a Service dropdown if the queue has services. After a successful join, the panel shows the customer's position, how many are ahead of them, estimated wait time, and a Leave Queue link. The widget polls the backend every 3 seconds to keep the status current.

Where it works

It's plain vanilla JavaScript rendered inside a Shadow DOM, so styles on your site won't bleed in or out. It works on WordPress, Squarespace, Webflow, Shopify, Wix, and custom-built sites. Anywhere you can paste a <script> tag will work.

Common problems

  • Widget doesn't appear. Open your browser console and look for a 404 on widget.js. Double-check the src URL and confirm data-queue-id is set correctly.
  • Customers can't submit the form. The widget calls your API host. If you set data-api-url, make sure it's reachable from the public internet and has CORS allowing your site's origin.
  • Wrong queue opens. Verify the queue ID. Each queue has its own ID, and pasting the wrong one sends customers to a different line.
  • Button color looks off. The floating button uses your branding primary color from the widget config. Update branding on your organization or queue to change it.

Related articles