ONE CIRCLE. YOUR COLORS.

Try it yourself.

Bring the circle to your website. Style every part of it, from backgrounds and buttons to discount codes, borders and typography. Copy the embed into any page that accepts HTML. Merchant listings update automatically, with no separate catalogue to maintain.

Your website can also control the theme directly with its own CSS variables or JavaScript. The website-controlled embed follows changes to your site’s colors and light/dark mode without reloading the circle.

Preview theme ↓

Use six-digit hex colors, or eight digits to include opacity, such as #FFFFFF80.

Backgrounds and text

Background color

Card background

Text color

Heading color

Secondary text color

Accent color

Border color

Main buttons

Button background

Button text

Button border

Button hover background

Button hover text

Button hover border

Secondary buttons

Secondary button background

Secondary button text

Secondary button border

Secondary button hover background

Secondary button hover text

Secondary button hover border

Links and focus

Link color

Link hover color

Focus ring color

Footer color

Discount codes and notices

Code background

Code text

Code border

Notice background

Notice text

Notice border

Logo background

Typography and shape

Font familyFont size: 15pxCorner radius: 8pxBorder width: 1pxCard spacing: 20pxTransparent page background

Live preview

Edit theme ↑

Style sample

Check your button, notice and discount colors here, even before brands join.

SAMPLE-CODE

Sample notice. This is a design preview, not a redeemable offer.

Open your circle ↗Preview theme ↑

Your embed code

<iframe src="/embed?background=111510&amp;text=f2f0e9&amp;accent=d2ef78" title="Social Media Marketing Circle member offers" width="100%" height="760" style="border:0;border-radius:12px" loading="lazy"></iframe>

Your embed link

Theme it from your website.

Use this version to keep control in your own site. Edit the --circle-* colors in your stylesheet, add dark-mode overrides, or update the theme through JavaScript. All of the controls above are available to the host website.

Website-controlled embed code

<style>
.social-marketing-circle {
  --circle-background: #111510;
  --circle-text: #f2f0e9;
  --circle-accent: #d2ef78;
  --circle-surface: #182016;
  --circle-heading: #f2f0e9;
  --circle-muted: #a7aaa4;
  --circle-link: #d2ef78;
  --circle-link-hover: #ecffb3;
  --circle-border: #353e31;
  --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;
  --circle-secondary-background: #111510;
  --circle-secondary-text: #f2f0e9;
  --circle-secondary-border: #65705e;
  --circle-secondary-hover-background: #263120;
  --circle-secondary-hover-text: #ffffff;
  --circle-secondary-hover-border: #d2ef78;
  --circle-code-background: #202b17;
  --circle-code-text: #d2ef78;
  --circle-code-border: #9bb456;
  --circle-notice-background: #202b17;
  --circle-notice-text: #d2ef78;
  --circle-notice-border: #728544;
  --circle-logo-background: #ffffff;
  --circle-focus: #d2ef78;
  --circle-footer-text: #a7aaa4;
  --circle-font: sans;
  --circle-font-size: 15px;
  --circle-radius: 8px;
  --circle-border-width: 1px;
  --circle-spacing: 20px;
  --circle-transparent: false;
}
</style>
<div class="social-marketing-circle" data-circle-embed></div>
<script defer src="/circle-embed.js"></script>

The host controls presentation. Discount reveals still open in the secure member tab and require an active TCM subscription.

The preview shows the real circle. Offers appear as merchants join. Choose colors with clear text contrast. Member discounts open in a secure tab so sign-in works even when browsers block third-party cookies. Codes remain exclusive to active TCM subscribers.