SDKs & Integrations

Webflow Integration

Embed follower counters, growth charts, and engagement widgets on any Webflow site. One script tag in your site’s head code, then configure everything with data-outfame-* attributes.

Custom code setup

Go to Site Settings → Custom Code and paste this in the Head Code section:

<!-- Outfame Instagram Growth Widget — add to Site Settings → Head Code -->
<script
  src="https://cdn.outfame.com/embed/v1/outfame.min.js"
  data-api-key="pk_live_xxxxxxxxxxxx"
  data-account-id="acc_7Gx2kLm9Qr"
  defer
></script>

The script discovers elements with data-outfame-* attributes automatically. Loads async, no impact on Lighthouse.

Embed components

Add a Div Block or HTML Embed with the matching data-outfame attribute. The script renders the component inside it.

Follower counter

Live follower count, updates every 60 seconds.

<!-- Paste inside an HTML Embed element in Webflow -->
<div
  data-outfame="follower-counter"
  data-format="compact"
  data-show-growth="true"
  data-period="7d"
></div>

Growth chart

Responsive follower growth chart.

<div
  data-outfame="growth-chart"
  data-period="30d"
  data-height="280"
  data-color="#e91e8c"
  data-show-labels="true"
></div>

Engagement stats

Compact card with followers gained, engagement rate, and daily activity.

<div
  data-outfame="engagement-stats"
  data-period="7d"
  data-layout="horizontal"
  data-metrics="followers,engagement_rate,likes"
></div>

Social proof badge

Small badge with follower count and growth. Works well in hero sections.

<div
  data-outfame="social-proof"
  data-variant="minimal"
  data-position="inline"
></div>

Webflow CMS integration

Push analytics into Webflow CMS collections to build dynamic pages driven by follower data. Useful for agencies managing multiple accounts or creators with public growth dashboards.

1. Create a CMS collection

In Webflow, create a new CMS collection called Instagram Analytics with these fields:

2. Sync with the Outfame API

Use the Outfame webhook or a scheduled sync to keep CMS items updated.

// Sync Outfame analytics → Webflow CMS (run daily via cron or webhook)
const OUTFAME_API_KEY = process.env.OUTFAME_API_KEY;
const WEBFLOW_API_TOKEN = process.env.WEBFLOW_API_TOKEN;
const WEBFLOW_COLLECTION_ID = "your_collection_id";

async function syncAnalyticsToWebflow() {
  // Fetch analytics from Outfame
  const response = await fetch("https://api.outfame.com/v1/analytics/overview", {
    headers: {
      Authorization: `Bearer ${OUTFAME_API_KEY}`,
      "Content-Type": "application/json",
    },
  });
  const { data } = await response.json();

  // Update Webflow CMS item
  await fetch(
    `https://api.webflow.com/v2/collections/${WEBFLOW_COLLECTION_ID}/items`,
    {
      method: "POST",
      headers: {
        Authorization: `Bearer ${WEBFLOW_API_TOKEN}`,
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        fieldData: {
          name: data.instagram_username,
          "account-handle": data.instagram_username,
          "follower-count": data.followers_count,
          "weekly-growth": data.net_growth_7d,
          "engagement-rate": `${data.engagement_rate}%`,
          "last-updated": new Date().toISOString(),
        },
      }),
    }
  );

  // Publish changes
  await fetch(
    `https://api.webflow.com/v2/collections/${WEBFLOW_COLLECTION_ID}/items/publish`,
    { method: "POST", headers: { Authorization: `Bearer ${WEBFLOW_API_TOKEN}` } }
  );
}

syncAnalyticsToWebflow();

Custom attributes & interactions

Outfame injects data attributes on rendered widgets that you can target with Webflow interactions and custom CSS.

/* Target Outfame elements in your Webflow custom CSS */
[data-outfame-status="growing"] {
  border-left: 3px solid #22c55e;
}

[data-outfame-status="paused"] {
  opacity: 0.6;
}

/* Style the follower counter */
[data-outfame="follower-counter"] .outfame-count {
  font-family: inherit;
  font-size: 2.5rem;
  font-weight: 700;
}

[data-outfame="follower-counter"] .outfame-growth-badge {
  background: #dcfce7;
  color: #16a34a;
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 0.875rem;
}

Webflow interactions

The embed script dispatches custom events you can listen to for triggering Webflow IX2 interactions or custom JavaScript:

// Listen for Outfame data updates in Webflow page-level custom code
document.addEventListener("outfame:data-loaded", (event) => {
  const { followers, growth, engagementRate } = event.detail;
  console.log(`Current followers: ${followers}`);
  console.log(`Growth this week: +${growth}`);
  console.log(`Engagement rate: ${engagementRate}%`);
});

document.addEventListener("outfame:milestone", (event) => {
  const { milestone, followers } = event.detail;
  // Trigger a celebration animation when hitting 10K followers
  if (milestone === "10k") {
    document.querySelector(".celebration-lottie")?.click();
  }
});

Webhook integration

Connect growth events to Webflow Logic, Zapier, or Make.

Webflow Logic

Create a Webflow Logic flow triggered by an incoming webhook. Then configure the Outfame webhook to POST to your Webflow Logic URL:

// Create a webhook endpoint pointing to Webflow Logic
const webhook = await outfame.webhooks.create({
  url: "https://hooks.webflow.com/logic/v1/your-flow-id",
  events: [
    "account.growth_milestone",
    "analytics.weekly_summary",
    "engagement.daily_summary",
  ],
  metadata: {
    source: "webflow-integration",
  },
});

console.log("Webhook ID:", webhook.id);
console.log("Signing secret:", webhook.signingSecret);

Zapier / Make

SEO metadata

Add growth metrics to your page’s <head> for social sharing:

<!-- Instagram Growth Social Proof Meta Tags -->
<meta property="og:description"
  content="Trusted by 65,000+ creators. Grow your Instagram on autopilot." />
<meta name="twitter:label1" content="Instagram Followers" />
<meta name="twitter:data1" content="12,432" />
<meta name="twitter:label2" content="Weekly Growth" />
<meta name="twitter:data2" content="+847 this week" />

<!-- Dynamic injection via Outfame script -->
<script>
  document.addEventListener("outfame:data-loaded", ({ detail }) => {
    document
      .querySelector('meta[name="twitter:data1"]')
      ?.setAttribute("content", detail.followers.toLocaleString());
    document
      .querySelector('meta[name="twitter:data2"]')
      ?.setAttribute("content", `+${detail.growth} this week`);
  });
</script>

E-commerce: social proof on product pages

On Webflow E-commerce sites, showing your follower count and engagement alongside products adds trust at the point of purchase.

<!-- Add to any Webflow E-commerce product page via HTML Embed -->
<div class="outfame-social-proof-strip">
  <div
    data-outfame="social-proof"
    data-variant="inline-strip"
    data-show-avatar="true"
    data-show-engagement="true"
  ></div>
</div>

<style>
  .outfame-social-proof-strip {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #fafafa;
    border-radius: 12px;
    margin: 16px 0;
  }
</style>

The inline-stripvariant renders a compact row showing your Instagram avatar, follower count, engagement rate, and a “Growing with Outfame” badge — designed to fit naturally within product page layouts.

Product page widget options

Troubleshooting