Skip to main content

Make the page adapt when the chat opens

By default a docked chat opens as a clean overlay — it sits over your page and never leaves dead space. But you can make the page reflow to make room for it, the way docs.digitorn.ai does, so nothing is hidden underneath.

Why the site has to do it​

A widget cannot force a foreign page to reflow: it can't change the real browser viewport, so your @media / vw rules never fire for it. The correct way is to let the site reflow itself. So while a docked chat is open, it publishes a small cooperation hook on your <html> element:

  • attribute data-digitorn-embed="open"
  • attribute data-digitorn-embed-side="right" (or "left")
  • CSS variable --digitorn-embed-width — the live panel width, in px

You react to it in your own CSS. Paste this once into your stylesheet and the content slides over while the chat is open, then slides back on close:

css
html[data-digitorn-embed="open"] body {
  transition: padding .24s cubic-bezier(.22, 1, .36, 1);
}
html[data-digitorn-embed="open"][data-digitorn-embed-side="right"] body {
  padding-right: var(--digitorn-embed-width);
}
html[data-digitorn-embed="open"][data-digitorn-embed-side="left"] body {
  padding-left: var(--digitorn-embed-width);
}

Target the right element for your layout: body works when the page flows normally. If your layout is a fixed / 100vw shell or a centred max-width column, apply the padding to your actual content wrapper instead (and to a fixed header, so nothing hides under the drawer). Because your site adjusts its own layout, its responsive rules keep behaving correctly. The Embed tab shows this exact CSS ready to copy.

Building the site with Digitorn?

If you generate the site with Digitorn Code or Digitorn Craft, just ask it to add the embed and the cooperation hook — it bakes the CSS in against the real content wrapper, so a docked chat reflows perfectly out of the box.

Without the hook CSS​

  • Overlay (default) — the drawer sits over the page. Clean, works everywhere, never leaves dead space.
  • data-push="true" — a best-effort auto-shift by the widget: it measures the free space and pushes only the deficit. Works on fluid sites; the hook CSS above is more reliable when you control the site.
  • data-push-target="<css selector>" — the widget shifts that specific element.

Be honest about the limit: on a site you don't control, a foreign page can't be made to reflow — overlay is the correct fallback.