> ## Documentation Index
> Fetch the complete documentation index at: https://docs.buildbetter.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Embed Your Portal on Your Website

> Set up a feedback board, roadmap, or changelog at your own subdomain or website path

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.

<Warning>
  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.
</Warning>

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

1. In BuildBetter, open [Portal boards](https://app.buildbetter.app/build/portal/boards).
2. Select the feedback or changelog board you want to display.
3. Check that the board is enabled and its visibility matches your intended audience.
4. Open the board's public link with **Preview**.
5. Copy the board key from that link.

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

```text theme={null}
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](https://app.buildbetter.app/build/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.

```html theme={null}
<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:

```html theme={null}
<!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.

<Note>
  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.
</Note>

### 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`

1. Publish the page at your website host and check its temporary HTTPS address.
2. Add `feedback.example.com` in that host's custom-domain settings.
3. Add the DNS record that the website host supplies.
4. Wait until the host confirms that the domain and HTTPS certificate are active.
5. 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.

<Warning>
  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.
</Warning>

### 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](../Help/support-channels) 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.

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

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.

## Related Guides

* [Boards and voting](./boards-and-voting)
* [Roadmap](./roadmap)
* [Changelog](./changelog)