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

# Installing an Embed

> Add the posts panel to your app with one script tag

# Installing an Embed

The embed adds a trigger button to your app that opens a slide-over panel with your latest posts.

<Note>
  Embeds are available on the **Business** plan.
</Note>

## Installation

### 1. Create an embed

1. In the dashboard, go to **Account → Embeds**
2. Click **New Embed**
3. Configure it in the embed editor (theme, placement, colors, button label, heading text)
4. Save

### 2. Copy the script tag

The dashboard shows a unique script tag for your embed. It looks like this:

```html theme={null}
<script type="text/javascript" src="https://.../<embed-id>.js"></script>
```

<Warning>
  Always copy the exact script tag from your dashboard — the URL contains your embed's unique ID.
</Warning>

### 3. Add it to your site

Paste the script tag before the closing `</body>` tag on every page where you want the embed to appear. The trigger button renders where the tag is placed.

```html theme={null}
<!DOCTYPE html>
<html>
  <head>...</head>
  <body>
    <!-- Your app content -->

    <!-- updates.page embed (copy your exact tag from Account → Embeds) -->
    <script type="text/javascript" src="https://.../<embed-id>.js"></script>
  </body>
</html>
```

That's it — clicking the button opens the slide-over panel with your latest posts.

## Using your own trigger

Don't want the default button? In the dashboard embed editor, set the embed's **action style** to **custom**. This hides the default button so you can open the panel from your own UI using the JavaScript API:

```html theme={null}
<button id="whats-new">What's New</button>

<script>
  document.querySelector('#whats-new').addEventListener('click', () => {
    window.UpdatesPage.open("<embed-id>")
  })
</script>
```

See the [JavaScript API](/embeds/inline) page for details.

## Customizing the look

All visual customization — theme, placement, panel size, colors, button label, heading text, and the updates.page badge — is configured in the dashboard embed editor, not in your HTML. See [Customizing Embeds](/embeds/styling).

## Framework notes

The embed is a plain script tag, so it works with any framework. Inject it once in your root layout or app shell:

<AccordionGroup>
  <Accordion title="React">
    ```jsx theme={null}
    import { useEffect } from 'react'

    function App() {
      useEffect(() => {
        const script = document.createElement('script')
        script.type = 'text/javascript'
        // Use the exact URL from your dashboard (Account → Embeds)
        script.src = 'https://.../<embed-id>.js'
        document.body.appendChild(script)

        return () => document.body.removeChild(script)
      }, [])

      return <div>...</div>
    }
    ```
  </Accordion>

  <Accordion title="Next.js">
    Use the Script component in your root layout:

    ```jsx theme={null}
    import Script from 'next/script'

    export default function Layout({ children }) {
      return (
        <>
          {children}
          {/* Use the exact URL from your dashboard (Account → Embeds) */}
          <Script src="https://.../<embed-id>.js" strategy="lazyOnload" />
        </>
      )
    }
    ```
  </Accordion>

  <Accordion title="Vue">
    ```vue theme={null}
    <template>
      <div>...</div>
    </template>

    <script>
    export default {
      mounted() {
        const script = document.createElement('script')
        script.type = 'text/javascript'
        // Use the exact URL from your dashboard (Account → Embeds)
        script.src = 'https://.../<embed-id>.js'
        document.body.appendChild(script)
      }
    }
    </script>
    ```
  </Accordion>
</AccordionGroup>
