Installation Guide

Add a Swvle widget to your site with the embed snippet generated in your workspace.

Embed Widget

The widget editor generates the exact snippet for each SuperFan. In your workspace, open Widgets → Edit → Design & Embed, copy the Floating snippet, and paste it before the closing </body> tag on the host page.

Floating widget

<script
  async
  src="https://www.swvle.com/embed.js"
  data-id="YOUR_WIDGET_ID"
  data-mode="floating"
  data-theme="branded"
  data-position="right"
  data-header="show"
  data-footer="hide"
></script>

Inline widget

<div id="swvle-widget"></div>
<script
  async
  src="https://www.swvle.com/embed.js"
  data-id="YOUR_WIDGET_ID"
  data-mode="inline"
  data-container="#swvle-widget"
  data-theme="branded"
  data-header="show"
  data-footer="hide"
></script>

Iframe fallback

<iframe
  src="https://www.swvle.com/embed/YOUR_WIDGET_ID?mode=inline&theme=branded&header=show&footer=hide"
  title="SuperFan Widget"
  width="100%"
  height="420"
  loading="lazy"
  referrerpolicy="strict-origin-when-cross-origin"
  sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox allow-top-navigation-by-user-activation"
  style="border:0;display:block;overflow:hidden;background:transparent"
></iframe>

Replace YOUR_WIDGET_IDwith the widget ID from the generated snippet. The Design & Embed tab includes saved defaults for theme, header, footer, position, and chrome, so you usually do not need to hand-edit attributes.