Framer sites and third-party embeds
Framer is a visual builder that publishes real, hosted web pages. It is popular for marketing sites, portfolios, and increasingly for blogs built on its CMS. What it does not include is a comment section, because comments need a place to store data and Framer is focused on design and publishing rather than running a discussion backend.
That gap is easy to fill. Framer supports custom code embeds, and a hosted comment service renders into one of those embeds with a single script tag. Gabden's embed is around 10KB, loads asynchronously, and keys each thread to the page's canonical URL, so it fits neatly into a Framer page without slowing it down.
Add the embed to a page
Framer gives you an Embed element for exactly this kind of thing. Here is the flow.
- Open the page or CMS template where you want comments, usually a blog post layout.
- Insert an Embed element below the post body, where the thread should appear.
- Choose the HTML option and paste the Gabden snippet.
<div id='gabden-conversations'></div>
<script async src='https://YOUR-SITE.gabden.com/conversations.js'
data-page='canonical'
data-theme='auto'></script>Replace YOUR-SITE with the key from your Gabden dashboard. You copy it once per website. Give the embed element a sensible width so the thread has room, and set its height to hug its content if Framer offers that option, so the box grows with the conversation.
Using it on a CMS template
If your blog runs on Framer's CMS, add the embed to the collection page template rather than to individual posts. Placed on the template, the same embed renders on every post, and because Gabden keys threads to each page's canonical URL, every post gets its own separate discussion automatically. You set it up once and never touch it again per article.
Preview versus published URLs
Framer has a preview environment and a published site, and they use different URLs. Gabden ties each thread to the URL it loads on, so a comment left on a preview link belongs to a different thread than the same page live. This is not a problem, just something to know: do your real testing on the published domain, or on the custom domain you have connected, so the threads you create match what readers will see.
Once your custom domain is live, confirm the canonical URL for each post is the domain you expect. Consistent URLs keep each discussion attached to the right page.
What readers get
After the embed is in place, load a published post and the thread appears below the content. Readers can comment anonymously, leave a name and email as a guest, or sign in with Google or GitHub. Replies are threaded, and readers can react with a like or a heart. There are no tracking cookies and no fingerprinting, which sits well with the polished, privacy-conscious sites people tend to build in Framer.
Moderation and theming
From the Gabden dashboard you decide how comments are handled. Pre-moderate everything while you are getting started, then loosen to auto-approve returning verified people once you trust your regulars. A blocked-word filter and a spam queue catch the obvious problems. If you run a team, you can assign roles with per-module permissions so a collaborator can moderate without full account access.
Gabden ships light and dark themes with presets, so you can match the widget to your Framer design rather than fighting it. Pick the theme that suits your page and the thread blends in.
Turning comments off on some pages
You probably do not want comments on your home page or contact page. Add the embed only to the templates and pages that should have discussion, and use Gabden's per-page rules to switch comments off on specific URLs from the dashboard. That gives you control without editing the Framer project every time.
To get your key and start, create a Gabden account. For the details on how the one-script embed behaves, see how conversations work.
Join the discussion