Embed Guide

Add the Refuel affiliate widget to your website with a single script tag. The widget enables visitors to generate their own referral links and start promoting your product instantly.

Basic Installation

The embed snippet loads the Refuel SDK asynchronously and renders a floating widget on your site. It requires only your publishable key (pk_...), which you receive when registering your company.

Minimal embedhtml

<script
  src="https://sdk.refuel.dev/v1.js"
  data-key="pk_your_publishable_key"
  async
></script>

Configuration Attributes

Customize the widget behavior and appearance with data-* attributes on the script tag.

Attribute	Type	Default	Description
data-key	string	required	Your publishable key (pk_...)
data-position	string	"bottom-right"	Widget position: "bottom-right" or "bottom-left"
data-accent	string	"#1A6B3C"	Primary accent color (hex)
data-text	string	"Earn with us"	Call-to-action button text

Platform-Specific Instructions

Select your platform below for tailored installation instructions.

Add this snippet right before the closing </body> tag on every page where you want the affiliate widget to appear.

index.htmlhtml

<!-- Refuel Affiliate Widget -->
<script
  src="https://sdk.refuel.dev/v1.js"
  data-key="pk_your_publishable_key"
  data-position="bottom-right"
  data-accent="#1A6B3C"
  data-text="Earn with us"
  async
></script>

How the Widget Works

The SDK loads your widget configuration from the Refuel API using your publishable key.
A floating button appears on your page in the configured position.
When a visitor clicks the button, a popup asks for their email and the page URL they want to promote.
The SDK calls POST /sdk/links to create or retrieve an affiliate link.
The visitor copies their unique referral link (e.g., acme.com?ref=abc123).
When someone visits through that link, the SDK automatically records a click event via POST /track/click.

Advanced Customization

For deeper customization beyond data attributes, you can configure the widget from your dashboard under Settings → Widget, or via the API:

Update widget config via APIbash

curl -X PUT https://api.refuel.dev/companies/settings \
  -H "Authorization: Bearer YOUR_JWT_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{
    "widgetConfig": {
      "position": "bottom-left",
      "accentColor": "#F0A500",
      "buttonText": "Become a partner"
    }
  }'

API-level widget config is merged with data attributes on the script tag. Data attributes take precedence, so you can use the API as a default and override per-page if needed.