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://staging.swvle.com/embed.js"
  data-id="YOUR_WIDGET_ID"
  data-mode="floating"
></script>

Inline widget

By default the widget renders in place of the script tag — no wrapping element required:

<script
  async
  src="https://staging.swvle.com/embed.js"
  data-id="YOUR_WIDGET_ID"
  data-mode="inline"
></script>

To mount it inside a specific element instead (e.g. a sidebar column), add data-container with a CSS selector and place the script tag anywhere on the page:

<div id="swvle-widget"></div>
<script
  async
  src="https://staging.swvle.com/embed.js"
  data-id="YOUR_WIDGET_ID"
  data-mode="inline"
  data-container="#swvle-widget"
></script>

Iframe fallback

<iframe
  src="https://staging.swvle.com/embed/YOUR_WIDGET_ID?mode=inline"
  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 widget's saved Design & Embed settings (theme, header, footer, position, and chrome) apply automatically, so you usually do not need to hand-edit attributes.

Optional overrides

Add any of the following data-*attributes to override this widget's saved settings for one specific install. Omit them to use the saved defaults.

Attribute	Values	Overrides
`data-theme`	branded \| basic \| none	Saved widget theme
`data-theme-mode`	light \| dark	Saved light/dark chrome mode
`data-lang`	en \| es \| fr \| it	Response language for anonymous visitors (default: en)
`data-position`	left \| right	Floating launcher position
`data-header`	show \| hide	Saved header visibility
`data-footer`	show \| hide	Saved footer visibility
`data-height`	CSS value, e.g. 840px	Saved panel height
`data-width`	CSS value, e.g. 420px	Saved panel width
`data-container`	CSS selector, e.g. #swvle-widget	Inline only — mount point (default: after the script tag)

<iframe src="https://staging.swvle.com/embed/YOUR_WIDGET_ID?mode=inline" 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>

Attribute

Values

Overrides

data-theme

branded | basic | none

Saved widget theme

data-theme-mode

light | dark

Saved light/dark chrome mode

data-lang

en | es | fr | it

Response language for anonymous visitors (default: en)

data-position

left | right

Floating launcher position

data-header

show | hide

Saved header visibility

data-footer

show | hide

Saved footer visibility

data-height

CSS value, e.g. 840px

Saved panel height

data-width

CSS value, e.g. 420px

Saved panel width

data-container

CSS selector, e.g. #swvle-widget

Inline only — mount point (default: after the script tag)