Higher Logic Vanilla's (Vanilla) comment embedding lets you add a community-powered comment section to blog posts, articles, recipes, product pages, or other content pages on an external website. When someone comments on the external page, Vanilla stores that activity as a standard discussion thread in your community.
This creates a two-way engagement path:
- Visitors can comment directly on your website content.
- Community members can continue the same conversation inside Vanilla.
- Each external content page maps to one Vanilla discussion thread.
There are two ways to add embedded comments:
Method | Best for | Status |
|---|
Universal Comment Embed | Any website where you can add JavaScript and HTML | Recommended |
WordPress Plugin | Existing WordPress sites already using the old plugin | Deprecated |
Both methods use the same underlying legacy embed system.
- Each page on your website is connected to a Vanilla discussion by a unique identifier.
- The first comment on the page creates the linked Vanilla discussion. Any later comments are added to that same discussion.
IMPORTANT: Comment embedding uses Vanilla’s legacy embed system. It is separate from the Modern Embed system that uses the <vanilla-embed> web component for full community embedding. You can use Modern Embed for a full embedded community and legacy comment embedding for blog comments on the same website, but do not use <vanilla-embed> for comment sections. That component does not support this use case.
Before you begin
Before you add the embed code to your website, complete the setup in your Vanilla Dashboard.
Step 1: Enable embedding
- Go to Dashboard → Embedding.
- Toggle Embed My Forum to On.
- Save your changes if prompted.
This enables Vanilla’s legacy embed endpoints, including the comment embed script.
Step 2: Add your website as a Trusted Domain
- Navigate to Dashboard > Settings > Security.
- Find the Trusted Domains field.
- Add the domain of the website where comments will be embedded.
- Save your changes.
Use only the domain, not the full URL.
Correct examples:
example.com
blog.example.com
*.example.com
Incorrect examples:
https://example.com/blog/my-postexample.com/blog
This step allows your external website to display Vanilla content in the embedded comment iframe.
IMPORTANT: Use wildcards carefully. For example, *.example.com allows all subdomains of example.com, while overly broad wildcard patterns can allow more domains than intended.
Step 3: Choose a category for comment discussions
Each page with embedded comments creates a corresponding discussion in your Vanilla community. To keep these auto-created discussions organized, create a dedicated Category such as:
- Blog Comments
- Article Comments
- Recipe Comments
- Website Comments
To create the Category:
- Navigate to Dashboard > Settings > Posts > Categories.
- Create a new Category for embedded comment discussions.
- Note the Category ID.
- Use that Category ID as
vanilla_category_id in the embed code.
You can configure the Category so it does not clutter primary discussion lists, such as Recent Discussions, while still remaining accessible when linked.
Embedded comments are still standard Vanilla discussions. Normal category permissions still apply. If a user can see the comments in the embed, they can also see the linked discussion directly in the community if they have permission to access that Category.
Step 4: Configure comment display settings
Go to Dashboard → Embedding → Embed Settings to review optional display settings.
Setting | What it does |
|---|
Comments per Page | Controls how many comments appear per page in the embedded view. Available values are 10, 15, 20, 25, 30, 40, 50, and 100. The default is 50. |
Sort blog comments | Controls whether newest comments appear at the top or bottom. |
Redirect Users | When there is more than one page of comments, redirects users to the full forum discussion instead of paginating inside the embed. This can help drive traffic into your community. |
Enable popups for sign in pages | Controls whether sign-in links open in a popup or navigate the parent window. If you use SSO, consider leaving this disabled unless your SSO flow supports popup authentication. |
Universal Comment Embed
Use the Universal Comment Embed when you can add HTML and JavaScript directly to the external website.
Add the embed container and script
Place this code wherever the comment section should appear. Most sites place it at the bottom of the content, below the article body.
<div id="vanilla-comments"></div>
<script type="text/javascript">
/*** Required Settings ***/
// Replace this with your Vanilla community URL. Do not include a trailing slash.
var vanilla_forum_url = "https://your-community.example.com";
// Replace this with a stable, unique identifier for this page.
var vanilla_identifier = "blog-123";
/*** Optional Settings ***/
// Place auto-created discussions in a specific Vanilla category.
// var vanilla_category_id = "5";
// Display hint for the embedded comment form.
// var vanilla_title = "My Blog Post";
// Canonical URL for this content page. Defaults to the current page URL.
// var vanilla_url = "https://www.example.com/blog/my-post";
// jsConnect SSO string for seamless embedded sign-in.
// var vanilla_sso = "your-sso-string";
/*** DON'T EDIT BELOW THIS LINE ***/
(function () {
var vanilla = document.createElement("script");
vanilla.type = "text/javascript";
vanilla.src = vanilla_forum_url + "/js/embed.js";
(document.getElementsByTagName("head")[0] || document.getElementsByTagName("body")[0]).appendChild(vanilla);
})();
</script>
Update these values before publishing:
Variable | Required? | Description |
|---|
vanilla_forum_url
| Yes | Your Vanilla community URL, without a trailing slash. |
vanilla_identifier
| Yes | A stable, unique identifier for the page. |
vanilla_category_id
| Recommended | Category ID for auto-created discussions. |
vanilla_title
| Optional | Display hint for the embed form. |
vanilla_url
| Optional | Canonical URL back to the external content page. |
vanilla_sso
| Optional | jsConnect SSO payload for embedded authentication. |
Choose the right identifier
The vanilla_identifier is the most important value in the embed code. It tells Vanilla which discussion belongs to the current external page.
Choose this value carefully.
Use a stable value
Do not use a URL as the identifier if your URLs might change later. A CMS post ID, database primary key, slug, or other stable content ID is usually better.
Good examples:
var vanilla_identifier = "blog-123";
var vanilla_identifier = "recipe-9876";
var vanilla_identifier = "article-456";
Riskier example:
var vanilla_identifier = "https://www.example.com/blog/2026/05/my-post";
If that URL changes, the page may no longer connect to the original comment thread.
Include a content type prefix
Use a prefix such as blog-, recipe-, or article- before the numeric ID.
This avoids collisions across content types. For example, a blog post and a recipe might both have ID 123, but blog-123 and recipe-123 remain distinct.
Keep it under 32 characters
Identifiers longer than 32 characters are automatically MD5-hashed before storage. They still work, but they become much harder to trace during troubleshooting or migrations.
Make it unique per page
If two pages use the same vanilla_identifier, they share the same comment thread.
This can be useful only if you intentionally want two pages to share one discussion. Otherwise, every content page should have its own identifier.
Do not change it after comments exist
Changing the identifier on a page that already has comments creates a new, empty discussion. The original comments still exist in Vanilla, but they are no longer connected to that external page.
If you need to change identifiers after launch, plan that change carefully.
Dynamic identifiers
The embed code is JavaScript, so your site can generate identifiers dynamically from the page.
Example using the <body> ID:
var vanilla_identifier = document.getElementsByTagName("body")[0].id;
Example using a page title element:
var vanilla_title = document.getElementById("post-title").innerHTML;
Use dynamic identifiers only when the source value is stable. Avoid using values that editors might change later, such as a visible page title, unless your CMS keeps a stable slug or ID separately.
Optional embed settings
vanilla_category_id
Places the auto-created discussion into a specific Vanilla category by numeric category ID.
Example:
var vanilla_category_id = "5";
This is strongly recommended for sites with many embedded comment pages.
vanilla_title
Provides a display hint for the embedded comment form.
When the first comment creates the linked discussion, Vanilla fetches the page at vanilla_url and attempts to use the page title. It checks the og:title meta tag first, then the HTML <title> tag.
Setting vanilla_title does not override that fetched discussion title in all cases. Treat it as a display hint rather than the source of truth.
Example:
var vanilla_title = "My Blog Post";
vanilla_url
Sets the canonical URL of the external page being commented on.
Vanilla uses this as the link back from the community discussion to the original content.
Example:
var vanilla_url = "https://www.example.com/blog/my-post";
If omitted, Vanilla uses the current page URL.
vanilla_discussion_id
Connects the embed to a specific existing Vanilla discussion by numeric discussion ID.
Use this when you already created the discussion and want the external page to point to it.
Example:
var vanilla_discussion_id = "12345";
vanilla_type
Sets a content type label for the embedded page. If omitted, Vanilla uses page.
Example:
var vanilla_type = "article";
Vanilla uses the combination of vanilla_identifier and vanilla_type to find the matching discussion.
IMPORTANT: The comment count script is hardcoded to query discussions with type page. If you set vanilla_type to a custom value, comment counts can return 0 for those discussions.
vanilla_sso
Passes a jsConnect SSO string for embedded sign-in.
Use this when you want users who are signed in to your main website to also be signed in to embedded Vanilla comments.
Example:
var vanilla_sso = "your-sso-string";
vanilla_embed_locale
Passes a locale code to the embedded comment view.
Example:
var vanilla_embed_locale = "fr";
The locale value is included in the embed request. The Multilingual plugin is what acts on that value to change the language of the embedded comments.
vanilla_lazy_load
Controls whether the embedded iframe loads only when it scrolls into view.
If true, which is the default, and jQuery is present on the page, the iframe lazy-loads. Set this to false if you want the comments to load immediately.
Example:
var vanilla_lazy_load = false;
Comment counts on index pages
You can show comment counts on blog index pages, article listing pages, recipe lists, or other content feeds. This helps visitors see which posts already have active discussion.
Add the count script
Place this code near the end of the index page, before the closing </body> tag.
<script type="text/javascript">
var vanilla_forum_url = "https://your-community.example.com";
(function () {
var vanilla_count = document.createElement("script");
vanilla_count.type = "text/javascript";
vanilla_count.src = vanilla_forum_url + "/js/count.js";
(document.getElementsByTagName("head")[0] || document.getElementsByTagName("body")[0]).appendChild(vanilla_count);
})();
</script>
Replace https://your-community.example.com with your actual Vanilla community URL.
Mark each comment link
Add a vanilla-identifier attribute to the link or element where the count should appear. Use the same identifier used in that page’s comment embed.
<a href="https://www.example.com/blog/my-post/#vanilla-comments" vanilla-identifier="blog-123">
Comments
</a>
Vanilla replaces the text inside the element with the actual count, such as:
5 Comments
IMPORTANT: The count script only returns counts for discussions with the default type page. If your embed code uses a custom vanilla_type, counts for those discussions can return 0.
Customize count text
Set these variables before loading /js/count.js.
<script type="text/javascript"> var vanilla_forum_url = "https://your-community.example.com"; // Text shown when there are no comments. var vanilla_comments_none = "No Comments"; // Text shown when there is one comment. var vanilla_comments_singular = "1 Comment"; // Text shown when there are multiple comments. // Both {num} and [num] are supported. var vanilla_comments_plural = "{num} Comments"; (function () { var vanilla_count = document.createElement("script"); vanilla_count.type = "text/javascript"; vanilla_count.src = vanilla_forum_url + "/js/count.js"; (document.getElementsByTagName("head")[0] || document.getElementsByTagName("body")[0]).appendChild(vanilla_count); })();</script>
WordPress Plugin
IMPORTANT: The Vanilla Forums WordPress plugin has been deprecated and is no longer actively supported or maintained by Higher Logic. No updates or technical support are provided.
The plugin wraps the same underlying legacy embed system used by the Universal Comment Embed. If an existing WordPress site is already using the plugin successfully, there is no urgent need to remove it solely because it is deprecated.
However, for new implementations, use the Universal Comment Embed instead.
Be aware that future WordPress, PHP, browser, or Vanilla platform changes may break the deprecated plugin, and fixes are not expected.
The plugin remains available at:
wordpress.org/plugins/vanilla-forums
If you need alternatives for connecting Vanilla to an external website or content platform, contact your CSM or Vanilla Support.
Troubleshooting
Embedded comments load inside an iframe. This means the community’s session cookies can be treated as third-party cookies by the browser.
Modern browser privacy controls can affect embedded authentication:
- Safari blocks many third-party cookies by default.
- Firefox may partition third-party storage.
- Chrome has been moving toward phasing out third-party cookies.
Even when SSO succeeds, the browser may not persist the Vanilla session cookie in the embedded context. This can make the user appear logged out after navigation or reload.
If reliable authenticated access is required across browsers, consider whether a first-party community experience is a better fit than embedded comments.
For more details, see:
Planning for migrations
If your external website might move to a new CMS, change URL structures, or migrate content later, plan your identifiers now.
The vanilla_identifier you choose today determines whether comments stay connected after the migration.
Use deterministic identifiers
Use stable, type-prefixed identifiers such as:
blog-123recipe-9876article-456
Avoid bare numeric IDs like this:
123
Bare numeric IDs are harder to debug and may collide across content types on a future platform.
Verify mappings before and after migration
Before migrating, select a sample of active pages and record:
- External page URL
vanilla_identifiervanilla_type- Linked Vanilla discussion ID
After migration, verify that the new page still uses the same vanilla_identifier and vanilla_type.
If either value changes, Vanilla may create a new empty discussion instead of connecting to the existing comments.
Remember vanilla_type
Vanilla matches embedded comment discussions using both:
vanilla_identifiervanilla_type
If vanilla_type is not set, the default is page.
If the old website omitted vanilla_type but the new website explicitly sets it to article, the match will fail. The reverse is also true.
For the safest migration, keep both values consistent.
Embedded Comments Launch checklist
Before launching embedded comments, it's recommended that your team confirm the following:
- Embedding is enabled in the Vanilla Dashboard.
- The external website domain is added to Trusted Domains.
- The website and Vanilla community both use HTTPS.
- Each page has a unique, stable
vanilla_identifier. - Identifiers are under 32 characters when possible.
- A dedicated Vanilla category is configured for embedded comment discussions.
- Category permissions match the intended audience.
- Comment count scripts use the same identifiers as the comment embeds.
vanilla_type is either omitted everywhere or used consistently everywhere.- SSO behavior has been tested in multiple browsers if authenticated commenting is required.
- High-volume comment threads have been tested if you are migrating existing content.
- A migration map exists if the external content platform may change later.
Summary
Use the Universal Comment Embed for new comment embedding implementations. It works on any website that can add HTML and JavaScript, and it connects each external page to a standard Vanilla discussion.
Choose stable identifiers, add your website as a Trusted Domain, and consider using a dedicated category for auto-created comment discussions. Avoid using the deprecated WordPress plugin for new projects, and do not use the Modern Embed <vanilla-embed> component for comments.
For long-term reliability, treat vanilla_identifier and vanilla_type as permanent content mapping values. Once comments exist, changing either one can disconnect the page from its existing discussion.