Once your widget is published, adding it to your website takes about 30 seconds. MentionFox provides two embedding methods: a script tag (recommended) and an iframe fallback.
The script tag method gives you the best performance and automatic resizing. Copy the code from the widget builder and paste it where you want the widget to appear:
<div id="mfox-widget-abc123"></div>
<script src="https://mentionfox.com/widgets/abc123.js" async></script>
The script loads asynchronously so it does not block your page rendering. The widget renders inside the div and automatically adjusts its height to fit the content.
If your site does not allow external scripts (some CMS platforms restrict this), use the iframe embed instead:
<iframe src="https://mentionfox.com/widgets/abc123/embed" width="100%" height="400" frameborder="0"></iframe>
With iframes you need to set the height manually. Adjust the height value until the widget fits without extra whitespace or clipping.
Add a Custom HTML block in the Gutenberg editor and paste either embed code. If using the Classic Editor, switch to the Text tab and paste the code there. Some security plugins may strip script tags -- if the widget does not appear, check your plugin settings or use the iframe method.
Edit your theme, open the relevant template file (e.g., product page or homepage), and paste the script tag code where you want the widget. Alternatively, use a Custom Liquid section block.
Add an Embed element to your page and paste the script tag code. Webflow supports external scripts natively, so the recommended method works without issues.
Add a Code Block to your page and paste the embed code. Squarespace supports both script tags and iframes in Code Blocks.
Use the Wix HTML iframe element. Paste the iframe embed code (not the script tag -- Wix does not support external scripts in most plans).
For security, MentionFox widgets only load on domains you have whitelisted. Go to Settings > Widgets > Allowed Domains and add every domain where you plan to embed widgets (e.g., yoursite.com, staging.yoursite.com). Localhost is whitelisted by default for development.
When you edit a published widget in the builder, changes propagate to all embedded instances automatically. You do not need to update the embed code on your site. New mentions matching your widget's filters also appear automatically -- the widget fetches fresh data on each page load.
The widget script is less than 15 KB gzipped. It loads fonts and styles inline, so there are no additional network requests beyond the initial script and a single API call to fetch mention data. Typical time to first render is under 500ms on a fast connection.