Help center

Embedding

Overview

Embedding lets you display your clarife document directly inside another website or application. Visitors see your content without leaving your site. clarife provides ready-to-use embed code snippets that you copy and paste into your HTML.

ℹ️ Info: Pro plan users get iframe embedding. Business plan users additionally get widget and popup embed types.

Embed Types

TypeDescriptionPlan
IframeInline embed that fills a container on your pagePro+
WidgetFloating button that opens the document in a side panelBusiness
PopupButton that opens the document in a modal overlayBusiness

How to Get the Embed Code

  1. Open the Share panel — In the editor, click Share and create a share link (or select an existing one).
  2. Click the Embed tab — Switch to the Embed tab in the sharing panel.
  3. Choose an embed type — Select Iframe, Widget, or Popup (Business only for the last two).
  4. Copy the code — Click Copy code to copy the embed snippet to your clipboard.
  5. Paste into your site — Paste the code into the HTML of your website, help center, or web application.

Embed Code Examples

Iframe Embed

html
<iframe
  src="https://clarife.app/embed/abc123"
  width="100%"
  height="600"
  frameborder="0"
  allow="clipboard-write"
  style="border: 1px solid #e5e7eb; border-radius: 8px;"
></iframe>

Widget Embed (Business)

html
<script
  src="https://clarife.app/widget.js"
  data-share-id="abc123"
  data-position="bottom-right"
  data-button-text="View Tutorial"
  data-button-color="#6366F1"
  async
></script>

Popup Embed (Business)

html
<!-- Trigger button (style as you like) -->
<button onclick="ClarifPopup.open('abc123')">
  Open Tutorial
</button>

<script src="https://clarife.app/popup.js" async></script>

Customization

  • Iframe — control width, height, and border styling via standard HTML/CSS attributes.
  • Widget — configure position (bottom-right, bottom-left), button text, and button color via data attributes.
  • Popup — trigger the popup from any element using the JavaScript API.

Access Controls and Embeds

All access controls (password, email gate, expiry, domain allowlist) work inside embeds. If a password is set, the visitor sees the password prompt within the iframe, widget, or popup.

Can I embed a document without creating a share link first?

No. You must create a share link before embedding. The embed code uses the share link's unique ID.

Does the embed update when I edit the document?

Yes. The embed always shows the latest version of your document, just like a regular share link.

Can I use the embed on multiple pages?

Yes. The same embed code can be placed on any number of pages. There is no limit on the number of sites that use the same embed.

Why is the widget/popup option greyed out?

Widget and popup embeds are available on the Business plan only. Upgrade to Business to unlock these embed types.

Will the embed work inside a single-page application (SPA)?

Yes. The iframe approach works in any SPA (React, Vue, Angular). For the widget and popup, load the script once and call the API after navigation.