Embed Widget Documentation

Add a beautiful pricing widget to your website and let customers subscribe directly from your site.

1Quick Start

The fastest way to add Trickl pricing to your website. Just copy and paste this code into your HTML:

<!-- Trickl Pricing Widget -->
<div id="trickl-pricing"></div>
<script
  src="https://trickl.app/embed.js"
  data-provider="YOUR_PROVIDER_CODE"
  data-height="600"
></script>

Replace YOUR_PROVIDER_CODE with your unique provider code found in your dashboard.

2Installation Methods

Script (Recommended)

The script embed automatically handles initialization and is the easiest way to add the widget.

<div id="trickl-pricing"></div>
<script
  src="https://trickl.app/embed.js"
  data-provider="YOUR_PROVIDER_CODE"
  data-height="600"
></script>

Available Attributes

Attribute	Required	Default	Description
`data-provider`	Yes	-	Your unique provider code
`data-height`	No	600	Widget height in pixels
`data-width`	No	100%	Widget width (px or %)
`data-container`	No	#trickl-pricing	Custom container selector

iFrame

If you prefer more control or your platform doesn't support external scripts:

<iframe
  src="https://trickl.app/embed/YOUR_PROVIDER_CODE"
  width="100%"
  height="600"
  frameborder="0"
  style="border: none; overflow: hidden;"
  title="Pricing"
></iframe>

JavaScript API

For programmatic control over the widget:

<div id="pricing-widget"></div>

<script src="https://trickl.app/embed.js"></script>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    const widget = Trickl.init({
      container: '#pricing-widget',
      providerCode: 'YOUR_PROVIDER_CODE',
      height: '600px',
      width: '100%'
    });

    // To remove the widget later:
    // widget.destroy();
  });
</script>

3Framework Examples

React

import { useEffect, useRef } from 'react';

function TricklPricing({ providerCode }) {
  const containerRef = useRef(null);

  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://trickl.app/embed.js';
    script.async = true;

    script.onload = () => {
      if (window.Trickl && containerRef.current) {
        window.Trickl.init({
          container: containerRef.current,
          providerCode: providerCode,
          height: '600px'
        });
      }
    };

    document.body.appendChild(script);
    return () => document.body.removeChild(script);
  }, [providerCode]);

  return <div ref={containerRef} />;
}

// Usage: <TricklPricing providerCode="ABC123XY" />

Next.js

'use client';

import { useEffect, useRef } from 'react';
import Script from 'next/script';

export default function TricklPricing({ providerCode }) {
  const containerRef = useRef(null);
  const widgetRef = useRef(null);

  useEffect(() => {
    return () => {
      if (widgetRef.current?.destroy) {
        widgetRef.current.destroy();
      }
    };
  }, []);

  const handleScriptLoad = () => {
    if (window.Trickl && containerRef.current) {
      widgetRef.current = window.Trickl.init({
        container: containerRef.current,
        providerCode: providerCode,
        height: '600px'
      });
    }
  };

  return (
    <>
      <div ref={containerRef} />
      <Script
        src="https://trickl.app/embed.js"
        onLoad={handleScriptLoad}
        strategy="lazyOnload"
      />
    </>
  );
}

Vue.js

<template>
  <div ref="pricingContainer"></div>
</template>

<script>
export default {
  props: {
    providerCode: { type: String, required: true }
  },
  mounted() {
    const script = document.createElement('script');
    script.src = 'https://trickl.app/embed.js';
    script.async = true;

    script.onload = () => {
      if (window.Trickl) {
        window.Trickl.init({
          container: this.$refs.pricingContainer,
          providerCode: this.providerCode,
          height: '600px'
        });
      }
    };

    document.body.appendChild(script);
  }
}
</script>

4CMS Platforms

WordPress

Add a Custom HTML block and paste the embed code.

Webflow

Add an Embed element and paste the code.

Squarespace

Add a Code Block and paste the embed code.

Wix

Add an Embed HTML element and paste the code.

5Troubleshooting

Widget Not Showing

Check that your provider code is correct
Ensure the container div exists before the script loads
Open browser DevTools (F12) and check for errors

Content Security Policy (CSP)

If you have a strict CSP, add these directives:

frame-src https://trickl.app; script-src https://trickl.app;

Need Help?

Our support team is here to help you get set up.

Contact Support