Skip to main content

​
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.
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

<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)

<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>

<!-- 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.
Yes. The embed always shows the latest version of your document, just like a regular share link.
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.
Widget and popup embeds are available on the Business plan only. Upgrade to Business to unlock these embed types.
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.