Skip to main content

Embed Code Generator

Add a Society Speaks voting widget to your article in minutes. Developers get a clean iframe and customization controls. Editors get structured insight, not comment noise.

API Reference Contact

Embeds are available for Society Speaks native discussions.

Implementation checklist

  • Confirm your domain is allowlisted
  • Generate the iframe below
  • Add auto-resize for a seamless UX

Use the Partner Portal for production onboarding

Create your test keys, verify domains, and activate live keys from the Partner Portal. For scale, use the API to create discussions and store the returned discussion ID in your CMS. See the API Reference for the programmatic workflow.

For developers

A lightweight iframe, predictable params, and postMessage resize hooks.

For editors

Structured participation, clear consensus signals, and auditable methodology.

For audiences

Vote in seconds, see where the public aligns, and explore deeper analysis.

At-scale flow

1) Lookup by article URL, 2) create if missing, 3) store discussion ID.

What is a discussion ID?

A unique identifier returned by the API when a discussion is created or found.

No discussion yet?

Call POST /api/partner/discussions to create one, then embed immediately.

1. Find Your Discussion

or

Returned by the API when a discussion is created or found.

2. Choose a Theme

Or customize colors:

3. Add Your Reference (Optional)

Used for analytics. Lowercase, no spaces.

Preview

Enter a discussion ID or look up an article URL to see preview

Embed Code

<!-- Enter a discussion ID to generate embed code -->

Auto-resize Snippet

<script>
window.addEventListener('message', (event) => {
  if (event.data && event.data.type === 'societyspeaks:embed:resize') {
    const iframe = document.getElementById('societyspeaks-embed');
    if (iframe) iframe.style.height = event.data.height + 'px';
  }
});
</script>

Performance Hints

<link rel="preconnect" href="https://societyspeaks.io">
<link rel="dns-prefetch" href="https://societyspeaks.io">

Tips

  • Set iframe width to 100% for responsive embeds
  • Default height is 600px; adjust based on statement count
  • Add ref to track participation from your site
  • The embed posts its height via postMessage for dynamic sizing
  • Add the auto-resize snippet to avoid scrollbars
  • Use preconnect hints to speed up first paint