Integrating Shoutout.io with Framer

What you’ll need

• A Framer page where you want your testimonials to appear
• Your Shoutout Widget ID (copy it from Published → Embeddable Widgets → Install instructions in the Shoutout app)

Important: Don’t copy any example IDs from this guide. Use the values from your account.

Step 1 — Copy this snippet

Paste this whole block. Then change the placeholder values to your own.

<div style="width: 100%; max-width: 1100px; margin: 0 auto;">
  <div class="shoutout-embed" data-widgetTitle="YOUR_WIDGET_TITLE" data-widgetId="YOUR_WIDGET_ID"></div>
</div>
<script src="https://shoutout.io/static/website/js/embed.js" defer></script>

• YOUR_WIDGET_TITLE → a short label you choose (e.g., Reviews, Wall of Love)
• YOUR_WIDGET_ID → copy this exactly from the Shoutout app
• You can change max-width: 1100px; to make the section narrower/wider, or remove it for full‑width

Step 2 — Add it to your Framer page

1. Open your project in Framer and go to the page where you want the wall.
2. Click Insert (+) → Embed → HTML (or a Code block).
3. Paste the entire snippet from Step 1 into the block.
4. Replace the two placeholders with your real values.
5. Click Publish (top‑right) and open your live site to check.

That’s it. Your Shoutout grid/wall should appear on the page.

Tips

• The outer wrapper centers the content (margin: 0 auto;).
• Adjust max-width to fit your design (try 860px or 720px).
• Adding more widgets? You can paste another container above the same <script> — no need to duplicate the script on the same page.

Troubleshooting

• Nothing shows up → Make sure you published the site (Shoutout loads on the live site, not the in‑editor preview).
• Still blank → Double‑check you pasted your exact data-widgetId and kept class="shoutout-embed".
• Looks too wide/narrow → Change or remove max-width.
• More technical setups (rare) → If your site has advanced Content Security Policies or blockers, you may need to allow shoutout.io.

Remove it

• Delete the HTML block from the page and publish again.

Quick copy (with placeholders)

<div style="width: 100%; max-width: 1100px; margin: 0 auto;">
  <div class="shoutout-embed" data-widgetTitle="YOUR_WIDGET_TITLE" data-widgetId="YOUR_WIDGET_ID"></div>
</div>
<script src="https://shoutout.io/static/website/js/embed.js" defer></script>

Remember: replace the placeholders with your values from Shoutout: Published → Embeddable Widgets → Install instructions.