Embed the circle.

1. Quick start: paste an iframe

1. Open the theme builder and choose a starter theme.
2. Adjust the colors, typography and shape.
3. Click Copy embed code and paste it into your website’s HTML or embed block.

<iframe
  src="https://socialmediamarketingcircle.com/embed?background=ffffff&amp;text=202738&amp;accent=613bea&amp;surface=f5f6fa&amp;muted=596174"
  title="Social Media Marketing Circle member offers"
  width="100%"
  height="760"
  style="border:0;border-radius:12px"
  loading="lazy"
></iframe>

The embed is responsive to its container. Change the height to suit the placement; longer catalogues scroll inside the iframe. Listings update automatically. To edit an existing theme, use the embed’s Try it yourself link.

2. Let your website control the theme

Choose Copy website-controlled embed in the builder, or start with this example. The loader creates the iframe inside your container and reads its --circle-* CSS variables.

<style>
  .my-circle {
    --circle-background: var(--page-background, #ffffff);
    --circle-surface: #f5f6fa;
    --circle-text: #202738;
    --circle-heading: #111827;
    --circle-muted: #596174;
    --circle-link: #613bea;
    --circle-button-background: var(--brand-primary, #613bea);
    --circle-button-text: #ffffff;
    --circle-button-border: #613bea;
    --circle-button-hover-background: #4624ba;
    --circle-button-hover-text: #ffffff;
    --circle-button-hover-border: #4624ba;
    --circle-radius: 12px;
  }

  /* Match this selector to your site's dark-mode class. */
  .dark .my-circle {
    --circle-background: #111510;
    --circle-surface: #182016;
    --circle-text: #f2f0e9;
    --circle-heading: #f2f0e9;
    --circle-muted: #a7aaa4;
    --circle-link: #d2ef78;
    --circle-button-background: #d2ef78;
    --circle-button-text: #182013;
    --circle-button-border: #d2ef78;
    --circle-button-hover-background: #e4ff94;
    --circle-button-hover-text: #111510;
    --circle-button-hover-border: #e4ff94;
  }
</style>

<div class="my-circle" id="member-circle" data-circle-embed></div>
<script defer src="https://socialmediamarketingcircle.com/circle-embed.js"></script>

Replace the values with your brand colors, or connect them to existing site variables such as --brand-primary. Put the CSS in your own stylesheet if preferred. Backgrounds, cards and buttons are independent, so you can theme each one.

When your site toggles a class or theme attribute on the container or one of its ancestors, the embed updates without reloading. It also refreshes when the operating system’s light/dark preference changes, so CSS using prefers-color-scheme is supported. Define the desired colors in your CSS; the loader reads those values.

Each container can have a different theme. Use a different class or ID for each placement. Containers added after the page loads can call mount() or scan().

3. JavaScript controls

Once the loader has loaded, get a controller for a container. Calling mount() again returns the existing controller, so it does not duplicate the iframe.

// Run after circle-embed.js has loaded.
const circle = window.SocialMediaMarketingCircle.mount("#member-circle");

circle.setTheme({
  background: "#111510",
  surface: "#182016",
  text: "#f2f0e9",
  heading: "#f2f0e9",
  buttonBackground: "#d2ef78",
  buttonText: "#182013",
  radius: 16,
});

// Let CSS control this value again.
circle.setTheme({ buttonBackground: null });

// Reread styles after other stylesheet changes.
circle.refreshTheme();

// On component unmount or removal:
// circle.destroy();

Theme precedence is defaults → host CSS → container JSON → JavaScript overrides. Optional data-circle-theme on the container accepts a JSON object with the same JavaScript field names.

4. All theme settings

CSS variables use kebab case; JavaScript and URL parameters use camel case. For example, buttonHoverBackground maps to --circle-button-hover-background.

Host CSS supports normal CSS colors, including hex, RGB, HSL and references to your existing variables. Direct embed URLs accept six or eight hexadecimal digits without #. The last two digits control opacity. The builder accepts hex input with # and generates the URL for you.

Typography, shape and transparency

Numeric CSS values may include px. JavaScript may use numbers. URL values use whole numbers without units. A transparent page background leaves each card’s surface color intact; use an eight-digit card color if you also want transparent cards.

5. How member access works

Brand profiles are public. Clicking an offer opens the circle in a secure tab, keeping the host’s current theme. Members sign in with TCM and must have an attached active customer and a current subscription to reveal a valid code.

This works without third-party sign-in cookies inside the iframe. Hosting sites control presentation; they do not receive account details or secret codes through the loader. No host-side login integration is required.

6. Troubleshooting

The embed is blank

Use an HTTPS website. Check that your website builder permits iframes and that your Content Security Policy allows https://socialmediamarketingcircle.com in frame-src.

The website-controlled version does not appear

Allow the same origin in your existing script-src policy and confirm that circle-embed.js loads. If your platform strips scripts, use the regular iframe option. Put CSS in an approved stylesheet if inline styles are restricted.

A CSS change is not showing

Set the variable on the container or an ancestor. Check whether container JSON or a JavaScript override takes priority. Use setTheme({ fieldName: null }) to clear an override, then refreshTheme() if needed.

The JavaScript API is undefined

Run your integration after the deferred loader has loaded, for example from a DOMContentLoaded handler. For an asynchronously inserted script, use its load event.

No brand offers are visible yet

The live catalogue fills as founding brands join. The builder’s style sample is a design preview, not a redeemable offer.

Need help with a placement? Contact Amelia.