PINK COBRA

Embed PINK COBRA

Drop the PINK COBRA chat widget onto any site, including Shopify. The background is transparent, so it floats over your page. The closed circle always rests in the bottom-right corner; choose where the chat card opens, whether it starts open or closed, and how big the circle is.

Card placement

Where the chat card opens. The closed circle always glides to the bottom-right corner.

Start state

Circle size

48px

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

<!-- PINK COBRA - Chat: the circle rests bottom-right, the card opens bottom-right -->
<iframe
  id="12am-chat"
  src="https://pinkcobra.lovable.app/?placement=bottom-right&collapsed=1&size=48"
  title="PINK COBRA - Chat"
  loading="lazy"
  allow="microphone; autoplay"
  allowtransparency="true"
  style="position:fixed;left:calc(100vw - 80px);top:calc(100vh - 80px);width:80px;height:80px;border:0;background:transparent;z-index:9999;transition:width 460ms cubic-bezier(0.32,0.72,0,1),height 460ms cubic-bezier(0.32,0.72,0,1),left 460ms cubic-bezier(0.32,0.72,0,1),top 460ms cubic-bezier(0.32,0.72,0,1);"
></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) {
        var w = d.width + 32;
        var h = d.height + 32;
        f.style.width = w + "px";
        f.style.height = h + "px";
        if (d.pos === "bottom-right") {
          f.style.left = (window.innerWidth - w) + "px";
          f.style.top = (window.innerHeight - h) + "px";
        } else {
          f.style.left = Math.round((window.innerWidth - w) / 2) + "px";
          f.style.top = Math.round((window.innerHeight - h) / 2) + "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