Embed 12am

Drop the 12am chat widget onto any site, including Shopify. The background is transparent, so it floats over your page. Choose where it sits, whether it starts open or closed, and how big the closed circle is.

Placement

Start state

Circle size

56px

The diameter of the floating circle when the chat is closed. It applies when it starts closed and after an open card is closed with the X.

Embed code

<!-- 12am - Chat: starts closed as a floating circle -->
<iframe
  id="12am-chat"
  src="https://agency12am12am.lovable.app/widget?placement=bottom-right&collapsed=1&size=56"
  title="12am - Chat"
  loading="lazy"
  allow="microphone; autoplay"
  allowtransparency="true"
  style="position:fixed;bottom:16px;right:16px;width:120px;height:120px;border:0;background:transparent;z-index:9999;"
></iframe>
<script>
  window.addEventListener("message", function (e) {
    var d = e.data || {};
    if (d.type === "12am-resize" && d.width && d.height) {
      var f = document.getElementById("12am-chat");
      if (f) {
        f.style.width = d.width + 64 + "px";
        f.style.height = d.height + 64 + "px";
      }
    }
  });
</script>

The snippet loads lazily for fast page loads and allows microphone access for voice search. It also listens for the widget's size, so the iframe hugs the floating circle when closed and grows to the full card when it opens. On Shopify, paste it into a Custom Liquid section or your theme's footer.

Preview