Embed Your Portal on Your Website

You can display a BuildBetter board on a page that your website hosts. Customers visit your address, such as feedback.example.com, changelog.example.com, or example.com/feedback. Your website supplies the page and HTTPS certificate. BuildBetter supplies the board inside an iframe. The browser address stays on your website as customers use the embedded board. This setup uses the existing portal embed. You do not need a BuildBetter custom-domain setting or the Copy embed button to use it.

Before You Start

You need:

An enabled public or unlisted BuildBetter board.
Access to publish a page on your website.
Access to your DNS settings if you want a new subdomain.

An unlisted board is not private. Anyone with its link can view it. Keep confidential feedback on a private board and share its direct BuildBetter link with authorized customers.

Private boards can require sign-in inside the iframe. Some browsers block the cookies that this sign-in needs. Use the direct board link for private access.

1. Select the Board

In BuildBetter, open Portal boards.
Select the feedback or changelog board you want to display.
Check that the board is enabled and its visibility matches your intended audience.
Open the board’s public link with Preview.
Copy the board key from that link.

For example, this public link contains the board key after /p/:

https://app.buildbetter.app/p/11111111-2222-4333-8444-555555555555

In this example, the key is 11111111-2222-4333-8444-555555555555. Use your own board’s key, not this sample or the internal board number from the management page. The board key is a public identifier, not an API key. Open the public link in a private browser window before you embed it. If the board does not load directly, resolve its visibility or access settings first.

2. Set the Branding

Open Portal settings. Set the logo, colors, and theme you want customers to see. Turn on White-label to hide Powered by BuildBetter. Select Save settings. The embed uses the portal’s branding. Your website’s CSS styles the surrounding page, but does not change the board inside the iframe.

3. Add the Embed to a Page

Paste this script where you want the board to appear. Replace YOUR_BOARD_KEY with your board’s key.

<script
  src="https://app.buildbetter.app/widget/portal-embed.js"
  data-board-key="YOUR_BOARD_KEY"
></script>

If you use a website builder, use its custom HTML or code block. A plain text block displays the code instead of running it. Your website plan must allow scripts. For a standalone page, save this as index.html and publish it with your website host:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Customer Feedback</title>
  </head>
  <body>
    <main>
      <script
        src="https://app.buildbetter.app/widget/portal-embed.js"
        data-board-key="YOUR_BOARD_KEY"
      ></script>
    </main>
  </body>
</html>

The embed adjusts its height as the board loads and customers open posts. You do not need to set a fixed iframe height.

The full-page portal embed differs from the changelog notification widget. Use this script to display the board on a page. Use the changelog widget for a notification badge inside your product.

Select the Initial View

Without data-view, the board opens its normal landing view. You can request an available tab with data-view:

Value	Use
`feedback`	Open the feedback tab on a feedback board.
`roadmap`	Open the roadmap when that board has it available.
`changelog`	Open the changelog view. Use your changelog board key for a release feed.

For example, add data-view="roadmap" to the script for a feedback board with a roadmap. The attribute does not create a tab or change the board’s kind.

4. Choose Your Address

A Subdomain: `feedback.example.com`

Publish the page at your website host and check its temporary HTTPS address.
Add feedback.example.com in that host’s custom-domain settings.
Add the DNS record that the website host supplies.
Wait until the host confirms that the domain and HTTPS certificate are active.
Open https://feedback.example.com and check the embedded board.

The website host can ask for a CNAME or another record type. Use its exact instructions and target value. Use a new subdomain if the proposed address already serves another application. For Cloudflare Pages, add the address under your Pages project’s Custom domains and follow the instructions there. Use the same process for changelog.example.com, with a page that embeds your changelog board.

Point the subdomain at your website host, not at app.buildbetter.app or the API hostname. Do not change your main website’s DNS records to set up the embed.

A Website Path: `example.com/feedback`

Publish the page at /feedback through your existing website host or application router. Add a link to that page from your website navigation. DNS records cannot route a URL path. You do not need a DNS change for /feedback on an existing HTTPS website. Keep the script URL and default embed host unchanged. Do not set data-host to your website address. Your website hosts the surrounding page, not the BuildBetter portal application.

5. Test the Setup

Open the customer-facing address in a private browser window, then check:

The address bar stays on your website.
The correct board, logo, and theme appear.
Posts or published changelog entries open.
The board’s available tabs work.
The page height adjusts as you move between views.
The page works on a phone-sized screen.
Submission and voting follow your board’s permissions.

For an interactive feedback board, use a designated test post to check submission and voting. Read-only changelog visitors do not need those actions. If your website uses a Content Security Policy, allow https://app.buildbetter.app in its existing script-src and frame-src permissions. Keep the other permissions your website needs.

Managed Custom Domains

The hosted-page setup above does not require BuildBetter to provision a custom hostname. Your website host manages DNS routing and HTTPS for your page. The separate Custom domain controls in Portal settings verify ownership and track certificate and routing status. A saved domain or successful TXT check alone does not mean the address can serve your portal. Use direct managed hosting only after BuildBetter confirms the routing instructions and the settings show Domain active. If certificate or routing setup remains pending, contact support and use the hosted-page embed meanwhile. Do not invent a CNAME target or point your domain at the standard BuildBetter app address.

Troubleshooting

The Code Appears as Text

Move the script into your website builder’s HTML or code block. Confirm that the builder allows scripts on published pages.

The Page Loads, but the Board Is Blank

Open the direct BuildBetter board link first. Check the board key, enabled state, and visibility. Then check the browser console for a blocked script or iframe. If the console reports a Content Security Policy error, update the website’s policy as described above. A missing data-board-key or invalid target selector also prevents the embed from loading.

The Subdomain Does Not Load or Shows a Certificate Error

Check the domain status at your website host. Confirm that your DNS record matches the target the host supplied and that HTTPS is active. This issue concerns the surrounding website page. Changing the board key will not repair DNS or a certificate.

The Page Opens the Wrong Board or View

Copy the key from the specific board’s Preview link, not the general Portal settings preview. Remove data-view to use that board’s normal landing view. Open the direct BuildBetter board link. Private-board sign-in can fail when the browser blocks third-party cookies. Do not make the board public to bypass an access requirement.

The Board Reports a Network Error

Compare the direct board link with the embedded page. If both fail, send support the board link and the failed request’s HTTP status. Do not include cookies, session tokens, or API keys.

​Before You Start

​1. Select the Board

​2. Set the Branding

​3. Add the Embed to a Page

​Select the Initial View

​4. Choose Your Address

​A Subdomain: feedback.example.com

​A Website Path: example.com/feedback

​5. Test the Setup

​Managed Custom Domains

​Troubleshooting

​The Code Appears as Text

​The Page Loads, but the Board Is Blank

​The Subdomain Does Not Load or Shows a Certificate Error

​The Page Opens the Wrong Board or View

​Sign-In Works Directly, but Not in the Embed

​The Board Reports a Network Error

​Related Guides

Before You Start

1. Select the Board

2. Set the Branding

3. Add the Embed to a Page

Select the Initial View

4. Choose Your Address

A Subdomain: `feedback.example.com`

A Website Path: `example.com/feedback`

5. Test the Setup

Managed Custom Domains

Troubleshooting

The Code Appears as Text

The Page Loads, but the Board Is Blank

The Subdomain Does Not Load or Shows a Certificate Error

The Page Opens the Wrong Board or View

Sign-In Works Directly, but Not in the Embed

The Board Reports a Network Error

Related Guides