> ## Documentation Index
> Fetch the complete documentation index at: https://widgetic.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Integrations

> Integrate Widgetic with other platforms

Widgetic can be integrated with various platforms and services to enhance your workflow. A widget is shown on a page through a composition, and the page needs only the composition id: there is no key in the page.

## Embed Code

This is the code that every example below uses. Put your own composition id in it:

```html theme={null}
<script src="https://cdn.widgetic.com/sdks/browser/embed-sdk.js?v=6"></script>
<widgetic composition-id="YOUR_COMPOSITION_ID" resize="fill-width" width="800" height="450" autoscale="on" adaptive="480" embed-target="site"></widgetic>
```

The Embed tab writes the same code from the composition's saved settings. See [Embed Script](https://widgetic.com/resources/sdks.md#embed-script) for what each attribute does.

> [!NOTE]
>
> If you limit the websites that may show your widgets, add every address that will show one, including preview and staging addresses. A page on an address that is not on the list shows nothing. See [Security](https://widgetic.com/resources/security.md).

## CMS Integrations

Paste the embed code wherever the platform lets you add custom HTML.

### WordPress

1. Add a "Custom HTML" block
2. Paste the embed code
3. Update the page

### Webflow

1. Add an Embed element
2. Paste the embed code
3. Publish your site

### Shopify

1. Open the theme editor and add a "Custom Liquid" section where the widget should go
2. Paste the embed code
3. Save the theme

## Places that take an address, not a script

A chat messenger, a link page, a site builder or a notes tool often takes an address or an iframe and no script. A composition has a frame for that, and so does a workflow: `https://api.widgetic.com/embed/workflows/YOUR_WORKFLOW_ID/frame`. See [Show a workflow where you cannot add a tag](https://widgetic.com/resources/sdks.md#show-a-workflow-where-you-cannot-add-a-tag) for the frame, for the oEmbed card, and for what a workflow cannot do inside a frame: it moves a visitor on only by what the frame can see itself, so a step that waits for an event from your page does not start there.

## E-commerce

### Product Configurators

Use widgets as interactive product configurators. The embed shows what its composition holds, so keep the widget up to date by saving your product data to the composition from your server whenever your catalogue changes. See [Compositions](https://widgetic.com/docs/api/compositions.md) for how to save a composition.

### Pricing Calculators

The same applies to pricing calculators: save your plans and prices to the composition, and every page that embeds it shows them.

> [!NOTE]
>
> This page does not document a way for the `<widgetic>` tag to hand a visitor's choice back to your page, for example to add a configured product to a cart. Build that step on your own page, around the embed.

## Marketing Tools

### Email Marketing

Email programs do not run scripts or embedded frames, so a widget cannot run inside an email. Send a static image of your own (a screenshot of the widget) that links to a page where the widget is embedded:

```html theme={null}
<!-- Email template -->
<a href="https://your-site.com/interactive-widget">
  <img src="https://your-site.com/images/widget-preview.png" 
       alt="Interactive Widget" />
</a>
```

### Landing Pages

Use widgets for interactive landing page elements:

* Calculators and configurators
* Interactive demos
* Data visualization
* Lead capture forms

## Analytics

### Google Analytics

Count how many visitors actually see the widget, by sending an event once it scrolls into view:

```typescript theme={null}
const widgetElement = document.querySelector('widgetic[composition-id="YOUR_COMPOSITION_ID"]');

if (widgetElement) {
  const viewObserver = new IntersectionObserver((entries) => {
    if (entries.some((entry) => entry.isIntersecting)) {
      gtag('event', 'widget_viewed', {
        event_category: 'Widget',
        event_label: 'YOUR_COMPOSITION_ID'
      });
      viewObserver.disconnect(); // Count each page view once
    }
  }, { threshold: 0.5 });

  viewObserver.observe(widgetElement);
}
```

### Mixpanel

```typescript theme={null}
const widgetElement = document.querySelector('widgetic[composition-id="YOUR_COMPOSITION_ID"]');

if (widgetElement) {
  const viewObserver = new IntersectionObserver((entries) => {
    if (entries.some((entry) => entry.isIntersecting)) {
      mixpanel.track('Widget Viewed', {
        composition_id: 'YOUR_COMPOSITION_ID'
      });
      viewObserver.disconnect();
    }
  }, { threshold: 0.5 });

  viewObserver.observe(widgetElement);
}
```

## Webhooks

Widgetic sends webhooks to partner accounts only. A partner account can have a signed call made to its own server when an invoice is paid, when its credits run low, when a customer's composition is created or saved, when a visitor sends an entry, and for the other events listed in [Notifications](https://widgetic.com/docs/partners/notifications.md). That page also shows how to set the address and how to check the signature.

Other accounts have no webhooks today, and there is no Webhooks page in the dashboard for them.

## Other Languages

Widgetic does not publish a Python or PHP package. Any language that can send HTTPS requests can call the REST API, and every endpoint in the [API Reference](https://widgetic.com/api-reference/introduction.md) has request samples in several languages. For TypeScript, use the [API SDK](https://widgetic.com/resources/sdks.md).


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.