# Categories
Source: https://docs.updates.page/announcements/categories

Organize your announcements with categories

# Categories

Categories help your users filter and scan your changelog. Use them to distinguish between new features, improvements, and bug fixes.

## Default categories

Every new account comes with three categories:

| Category        | Color      | Use for                             |
| --------------- | ---------- | ----------------------------------- |
| **New**         | Green      | Brand new features and capabilities |
| **Improvement** | Blue       | Enhancements to existing features   |
| **Fix**         | Red/Orange | Bug fixes and corrections           |

\[TODO: ADD IMAGE - CHANGELOG WITH CATEGORY FILTERS]

## Creating custom categories

You can create unlimited custom categories to match your workflow.

<Steps>
  <Step title="Go to Settings">
    Navigate to **Settings → Changelog → Categories**
  </Step>

  <Step title="Click Add Category">
    Enter a name and choose a color
  </Step>

  <Step title="Save">
    Your new category is ready to use
  </Step>
</Steps>

\[TODO: ADD IMAGE - CATEGORY SETTINGS PAGE]

### Category ideas

Depending on your product, you might want categories like:

* **Security** — Security patches and updates
* **API** — API changes and additions
* **Performance** — Speed and reliability improvements
* **Beta** — Features in beta testing
* **Deprecation** — Features being removed
* **Integration** — Third-party integrations

## Using categories

When creating an announcement, select a category from the dropdown above the editor.

<Note>
  Categories are optional. If you don't select one, the announcement will appear without a category tag.
</Note>

## Editing and deleting categories

To edit or delete a category:

1. Go to **Settings → Changelog → Categories**
2. Click the **...** menu next to the category
3. Choose **Edit** or **Delete**

<Warning>
  Deleting a category will remove it from all existing announcements. The announcements themselves won't be deleted.
</Warning>

## Filtering by category

Your users can filter your changelog by category using the filter buttons at the top of your portal.

\[TODO: ADD IMAGE - CATEGORY FILTER BUTTONS ON PORTAL]


# Cover Images
Source: https://docs.updates.page/announcements/cover-images

Add eye-catching cover images to your announcements

# Cover Images

Cover images make your announcements more visually appealing and improve engagement when shared on social media.

\[TODO: ADD IMAGE - ANNOUNCEMENT WITH COVER IMAGE VS WITHOUT]

## Adding a cover image

1. In the announcement editor, click the **image icon** in the header area
2. Upload an image or drag and drop
3. The image will appear as the announcement's cover

\[TODO: ADD GIF - ADDING COVER IMAGE TO ANNOUNCEMENT]

## Recommended specifications

| Property       | Recommendation                |
| -------------- | ----------------------------- |
| **Dimensions** | 1200 x 630px (1.91:1 ratio)   |
| **Format**     | PNG or JPG                    |
| **File size**  | Under 2MB                     |
| **Text**       | Keep minimal — may be cropped |

<Tip>
  The 1200x630 size is optimized for social media sharing (Twitter, LinkedIn, Facebook).
</Tip>

## Where cover images appear

Cover images are displayed in:

* **Your changelog portal** — At the top of the announcement detail page
* **Social media previews** — When the announcement URL is shared
* **RSS feeds** — As the enclosure/media element
* **Embeds** — In widget and inline embeds (if enabled)

## Best practices

<AccordionGroup>
  <Accordion title="Use consistent branding">
    Create a template with your brand colors and logo. This makes your changelog look professional and recognizable.
  </Accordion>

  <Accordion title="Show the feature">
    Screenshots or mockups of the actual feature work great. Users can immediately see what changed.
  </Accordion>

  <Accordion title="Avoid too much text">
    Social platforms may crop images differently. Keep text to a headline at most.
  </Accordion>

  <Accordion title="Consider dark mode">
    Test how your image looks on both light and dark backgrounds.
  </Accordion>
</AccordionGroup>

## Tools for creating cover images

Some tools that work great for changelog images:

* **[Figma](https://figma.com)** — Design custom images with templates
* **[Canva](https://canva.com)** — Easy drag-and-drop image creation
* **[CleanShot](https://cleanshot.com)** — Polished screenshots with annotations
* **[OG Image Generator](https://og-image.vercel.app)** — Auto-generate images from text


# Scheduling
Source: https://docs.updates.page/announcements/scheduling

Schedule announcements for future publication

# Scheduling Announcements

Plan ahead by scheduling announcements to publish automatically at a future date and time.

## How to schedule an announcement

<Steps>
  <Step title="Create your announcement">
    Write your announcement as usual in the editor.
  </Step>

  <Step title="Click the publish dropdown">
    Instead of clicking **Publish**, click the dropdown arrow next to it.
  </Step>

  <Step title="Select 'Schedule'">
    Choose the date and time you want the announcement to go live.
  </Step>

  <Step title="Confirm">
    Click **Schedule** to confirm. Your announcement will publish automatically.
  </Step>
</Steps>

\[TODO: ADD IMAGE - SCHEDULE DROPDOWN WITH DATE PICKER]

## Managing scheduled announcements

Scheduled announcements appear in your announcements list with a **Scheduled** badge.

You can:

* **Edit** the content before it publishes
* **Reschedule** to a different time
* **Publish now** to make it live immediately
* **Delete** to cancel the scheduled announcement

\[TODO: ADD IMAGE - SCHEDULED ANNOUNCEMENT IN LIST VIEW]

## Timezone handling

Scheduled times use your account's timezone setting. To change your timezone:

1. Go to **Settings → Account → General**
2. Select your timezone from the dropdown
3. Click **Save**

<Note>
  Changing your timezone won't affect already-scheduled announcements. They'll still publish at the originally intended moment.
</Note>

## Use cases for scheduling

<CardGroup>
  <Card title="Product launches" icon="rocket">
    Coordinate your changelog with launch day
  </Card>

  <Card title="Weekly updates" icon="calendar">
    Batch your updates and publish on a consistent schedule
  </Card>

  <Card title="Team coordination" icon="users">
    Write announcements ahead of time for review
  </Card>

  <Card title="Different timezones" icon="globe">
    Publish when your users are most active
  </Card>
</CardGroup>


# Writing Announcements
Source: https://docs.updates.page/announcements/writing

Best practices for writing updates your users will love

# Writing Great Announcements

Your changelog is a direct line to your users. Here's how to make the most of it.

## The anatomy of a great announcement

\[TODO: ADD IMAGE - ANNOTATED SCREENSHOT OF A WELL-STRUCTURED ANNOUNCEMENT]

### 1. Title

Your title is the first thing users see. Make it count.

**Do:**

* Be specific: "Export reports to PDF"
* Lead with the benefit: "Faster page loads"
* Use action words: "New", "Introducing", "Now available"

**Don't:**

* Be vague: "Updates" or "New feature"
* Use version numbers alone: "v2.4.1"
* Be too long: Keep it under 60 characters

### 2. Opening line

Hook readers in the first sentence. Get to the point immediately.

<CodeGroup>
  ```markdown Good theme={null}
  You can now export any report as a PDF with one click.
  ```

  ```markdown Bad theme={null}
  We've been working hard on this feature for months and we're excited to finally share it with you...
  ```
</CodeGroup>

### 3. Body content

Structure your content for scanning:

* **Use headings** to break up sections
* **Use bullet points** for lists of changes
* **Use bold text** for key information
* **Keep paragraphs short** — 2-3 sentences max

### 4. Visuals

A picture is worth a thousand words. Include:

* **Screenshots** for UI changes
* **GIFs** for interactive features
* **Code snippets** for API updates
* **Before/after** comparisons

<Tip>
  Use tools like [CleanShot](https://cleanshot.com) or [Loom](https://loom.com) to create polished screenshots and recordings.
</Tip>

***

## Writing for different announcement types

<Tabs>
  <Tab title="New Features">
    **Goal:** Get users excited and show them how to use it.

    **Structure:**

    1. What it is (one sentence)
    2. Why it matters (the benefit)
    3. How to use it (steps or link)
    4. What's next (optional)

    **Tone:** Excited but not over-the-top
  </Tab>

  <Tab title="Improvements">
    **Goal:** Show you're listening and making things better.

    **Structure:**

    1. What changed
    2. Why (user feedback, data, etc.)
    3. The impact (faster, easier, etc.)

    **Tone:** Confident, appreciative of feedback
  </Tab>

  <Tab title="Bug Fixes">
    **Goal:** Acknowledge the issue and confirm it's resolved.

    **Structure:**

    1. What was broken
    2. What's fixed now
    3. Thank reporters (if applicable)

    **Tone:** Direct, no excuses, grateful
  </Tab>
</Tabs>

***

## Rich text editor features

The updates.page editor supports:

| Feature       | Shortcut | Description          |
| ------------- | -------- | -------------------- |
| Bold          | `⌘+B`    | **Bold text**        |
| Italic        | `⌘+I`    | *Italic text*        |
| Heading 1     | `⌘+⌥+1`  | Main section headers |
| Heading 2     | `⌘+⌥+2`  | Subsection headers   |
| Bullet list   | `⌘+⇧+8`  | Unordered lists      |
| Numbered list | `⌘+⇧+7`  | Ordered lists        |
| Code          | `⌘+E`    | `Inline code`        |
| Code block    | `⌘+⌥+C`  | Multi-line code      |
| Link          | `⌘+K`    | Add hyperlinks       |
| Quote         | `⌘+⇧+B`  | Blockquotes          |

### Adding images

Click the image icon in the toolbar or drag and drop directly into the editor.

**Supported formats:** PNG, JPG, GIF, WebP

\[TODO: ADD GIF - DRAGGING IMAGE INTO EDITOR]

### Adding videos

Click the video icon and paste a YouTube or Wistia URL. The video will embed automatically.

***

## Writing tips from the pros

<AccordionGroup>
  <Accordion title="Write for scanners">
    Most users won't read every word. Make key information impossible to miss with bold text, headings, and bullet points.
  </Accordion>

  <Accordion title="One announcement, one topic">
    Don't bundle unrelated updates. Users should know exactly what an announcement is about from the title.
  </Accordion>

  <Accordion title="Link to more details">
    Keep announcements concise. Link to docs, blog posts, or help articles for users who want to go deeper.
  </Accordion>

  <Accordion title="Be human">
    It's okay to show personality. Thank users, admit mistakes, get excited about wins.
  </Accordion>
</AccordionGroup>


# Billing FAQ
Source: https://docs.updates.page/billing/faq

Common questions about billing and subscriptions

# Billing FAQ

Answers to common billing questions.

<AccordionGroup>
  <Accordion title="How do I upgrade my plan?">
    Go to **Settings → Team → Billing** and click **Upgrade** on the plan you want. Your upgrade takes effect immediately, and you'll be charged a prorated amount for the remainder of your billing period.
  </Accordion>

  <Accordion title="How do I cancel my subscription?">
    Go to **Settings → Team → Billing** and click **Cancel subscription**. Your access continues until the end of your current billing period, then you'll be downgraded to the Free plan.
  </Accordion>

  <Accordion title="What happens when I downgrade?">
    When you downgrade:

    * Your announcements and data are preserved
    * Features from higher tiers become unavailable
    * Extra team members beyond your new limit lose access
    * Custom domain continues until the end of your billing period
  </Accordion>

  <Accordion title="Can I get a refund?">
    We offer refunds within 14 days of your first payment if you're not satisfied. For refund requests, contact [support@updates.page](mailto:support@updates.page).
  </Accordion>

  <Accordion title="Do you offer annual billing?">
    Not yet, but it's coming soon! Annual billing will include a discount.
  </Accordion>

  <Accordion title="What payment methods do you accept?">
    We accept Visa, Mastercard, American Express, and Discover. All payments are processed securely through Stripe.
  </Accordion>

  <Accordion title="Can I change my billing email?">
    Yes. Go to **Settings → Team → Billing** and update your billing email. Receipts will be sent to the new address.
  </Accordion>

  <Accordion title="Where can I find my invoices?">
    Go to **Settings → Team → Billing** and scroll down to see your invoice history. Click any invoice to download a PDF.
  </Accordion>

  <Accordion title="What happens if my payment fails?">
    We'll retry the payment a few times. If it continues to fail, we'll email you to update your payment method. After 14 days of failed payments, your account may be downgraded.
  </Accordion>

  <Accordion title="Do you offer discounts for nonprofits or startups?">
    Yes! Contact [support@updates.page](mailto:support@updates.page) with details about your organization, and we'll see if you qualify for a discount.
  </Accordion>

  <Accordion title="Is there a free trial?">
    The Free plan is free forever. You can try all features on the Pro plan free for 14 days — just upgrade and cancel before the trial ends if you don't want to continue.
  </Accordion>

  <Accordion title="What's your privacy policy?">
    We take privacy seriously. Read our [Privacy Policy](https://updates.page/privacy) for details on how we handle your data.
  </Accordion>
</AccordionGroup>

## Still have questions?

Contact us at [support@updates.page](mailto:support@updates.page) and we'll be happy to help.


# Plans & Pricing
Source: https://docs.updates.page/billing/plans

Choose the right plan for your team

# Plans & Pricing

updates.page offers simple, transparent pricing.

## Plans

<CardGroup>
  <Card title="Free" icon="gift">
    **\$0/month**

    * Unlimited announcements
    * 1 team member
    * Subdomain (company.updates.page)
    * Basic customization
    * Built-in analytics
  </Card>

  <Card title="Pro" icon="star">
    **\$19/month**

    * Everything in Free
    * 3 team members
    * Custom domain
    * Advanced customization
    * Priority support
  </Card>

  <Card title="Business" icon="building">
    **\$49/month**

    * Everything in Pro
    * 10 team members
    * Remove "Powered by" branding
    * API access
    * SSO (coming soon)
  </Card>
</CardGroup>

## Feature comparison

| Feature            | Free      | Pro       | Business  |
| ------------------ | --------- | --------- | --------- |
| Announcements      | Unlimited | Unlimited | Unlimited |
| Team seats         | 1         | 3         | 10        |
| Custom subdomain   | ✓         | ✓         | ✓         |
| Categories         | ✓         | ✓         | ✓         |
| RSS feed           | ✓         | ✓         | ✓         |
| Built-in analytics | ✓         | ✓         | ✓         |
| Custom domain      | -         | ✓         | ✓         |
| Custom CSS         | -         | ✓         | ✓         |
| Google Analytics   | -         | ✓         | ✓         |
| Remove branding    | -         | -         | ✓         |
| API access         | -         | -         | ✓         |
| Webhooks           | -         | -         | ✓         |
| Priority support   | -         | ✓         | ✓         |

## Upgrading

<Steps>
  <Step title="Go to Billing">
    Navigate to **Settings → Team → Billing**
  </Step>

  <Step title="Choose a plan">
    Click **Upgrade** on the plan you want
  </Step>

  <Step title="Enter payment details">
    Add your credit card information
  </Step>

  <Step title="Confirm">
    Your upgrade takes effect immediately
  </Step>
</Steps>

\[TODO: ADD IMAGE - BILLING PAGE WITH PLAN OPTIONS]

## Payment methods

We accept:

* Visa
* Mastercard
* American Express
* Discover

Payments are processed securely through Stripe.

## Billing cycle

* Plans are billed monthly
* Upgrades take effect immediately
* Downgrades take effect at the end of the billing period
* No contracts — cancel anytime

## Need more?

For teams larger than 10 or custom requirements, [contact us](mailto:support@updates.page) for a custom plan.


# Inline Embed
Source: https://docs.updates.page/embeds/inline

Display announcements directly on your page

# Inline Embed

The inline embed displays your announcements directly within your page content, styled to match your site.

\[TODO: ADD IMAGE - INLINE EMBED ON A MARKETING SITE]

## Installation

### 1. Create an inline embed

1. Go to **Settings → Developer → Embeds**
2. Click **New Embed**
3. Select **Inline** as the type
4. Configure your settings
5. Click **Create**

### 2. Add the container

Add a container element where you want the announcements to appear:

```html theme={null}
<div id="updates-page-embed"></div>
```

### 3. Add the script

Copy and paste the script tag:

```html theme={null}
<div id="updates-page-embed"></div>

<script 
  src="https://cdn.updates.page/inline.js" 
  data-embed-id="your-embed-id"
  data-container="#updates-page-embed"
  async
></script>
```

## Configuration options

| Option           | Description                            | Default               |
| ---------------- | -------------------------------------- | --------------------- |
| **Container**    | CSS selector for the container element | `#updates-page-embed` |
| **Theme**        | Light or dark                          | Light                 |
| **Limit**        | Number of announcements to show        | 10                    |
| **Categories**   | Which categories to include            | All                   |
| **Show images**  | Display cover images                   | Yes                   |
| **Show dates**   | Display publication dates              | Yes                   |
| **Show authors** | Display author names                   | Yes                   |

## Customizing with CSS

The inline embed uses minimal default styling so you can customize it to match your site.

### Available CSS classes

```css theme={null}
/* Container */
.updates-page-inline { }

/* Individual announcement */
.updates-page-announcement { }

/* Announcement title */
.updates-page-title { }

/* Announcement content/summary */
.updates-page-content { }

/* Cover image */
.updates-page-image { }

/* Category badge */
.updates-page-category { }

/* Date */
.updates-page-date { }

/* Author */
.updates-page-author { }

/* "View all" link */
.updates-page-view-all { }
```

### Example: Card-style layout

```css theme={null}
.updates-page-announcement {
  background: #fff;
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.updates-page-title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 8px;
}

.updates-page-content {
  color: #666;
  line-height: 1.6;
}

.updates-page-category {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}
```

\[TODO: ADD IMAGE - BEFORE/AFTER CUSTOM CSS STYLING]

## Data attributes

Customize behavior with data attributes:

```html theme={null}
<script 
  src="https://cdn.updates.page/inline.js" 
  data-embed-id="your-embed-id"
  data-container="#updates-page-embed"
  data-limit="5"
  data-show-images="false"
  data-theme="dark"
  async
></script>
```

| Attribute           | Type    | Description                |
| ------------------- | ------- | -------------------------- |
| `data-embed-id`     | string  | Your embed ID (required)   |
| `data-container`    | string  | CSS selector for container |
| `data-limit`        | number  | Max announcements to show  |
| `data-show-images`  | boolean | Show cover images          |
| `data-show-dates`   | boolean | Show publication dates     |
| `data-show-authors` | boolean | Show author names          |
| `data-theme`        | string  | "light" or "dark"          |

## Linking to full changelog

The inline embed automatically includes a "View all updates" link to your full portal.

To customize or hide this link:

```html theme={null}
<!-- Hide the "View all" link -->
<script 
  src="https://cdn.updates.page/inline.js" 
  data-embed-id="your-embed-id"
  data-hide-view-all="true"
  async
></script>
```

Or style it with CSS:

```css theme={null}
.updates-page-view-all {
  display: inline-block;
  padding: 12px 24px;
  background: #000;
  color: #fff;
  border-radius: 6px;
  text-decoration: none;
}
```


# Embeds Overview
Source: https://docs.updates.page/embeds/overview

Show your changelog inside your app or website

# Embeds

Bring your changelog directly into your product with embeddable widgets.

\[TODO: ADD IMAGE - EMBED EXAMPLES (WIDGET + INLINE) SIDE BY SIDE]

## Why embed?

<CardGroup>
  <Card title="Keep users in your app" icon="window">
    Users don't have to leave to see what's new
  </Card>

  <Card title="Increase visibility" icon="eye">
    More users see your updates when they're in-context
  </Card>

  <Card title="Drive engagement" icon="message">
    "What's new" badges catch attention
  </Card>

  <Card title="Seamless experience" icon="puzzle-piece">
    Embeds match your app's look and feel
  </Card>
</CardGroup>

## Embed types

updates.page offers two embed types:

### Widget embed

A floating button that opens a slide-out panel with your announcements.

**Best for:**

* SaaS apps and dashboards
* "What's new" button in navigation
* Unobtrusive changelog access

\[TODO: ADD GIF - WIDGET OPENING AND SHOWING ANNOUNCEMENTS]

→ [Set up a widget embed](/embeds/widget)

### Inline embed

Announcements displayed directly on your page, styled to match your site.

**Best for:**

* Marketing websites
* Changelog pages
* Documentation sites

\[TODO: ADD IMAGE - INLINE EMBED EXAMPLE]

→ [Set up an inline embed](/embeds/inline)

## Quick comparison

| Feature       | Widget                    | Inline                   |
| ------------- | ------------------------- | ------------------------ |
| Installation  | 1 script tag              | 1 script tag + container |
| Visibility    | On-demand (click to open) | Always visible           |
| Customization | Colors, position          | Full CSS control         |
| "New" badge   | ✓                         | ✗                        |
| Best for      | Apps                      | Websites                 |

## Creating an embed

<Steps>
  <Step title="Go to Embeds">
    Navigate to **Settings → Developer → Embeds**
  </Step>

  <Step title="Create new embed">
    Click **New Embed** and choose Widget or Inline
  </Step>

  <Step title="Configure">
    Set the name, style, and options
  </Step>

  <Step title="Copy the code">
    Copy the generated script tag to your site
  </Step>
</Steps>

## Embed settings

Each embed can be configured with:

| Setting        | Description                               |
| -------------- | ----------------------------------------- |
| **Name**       | Internal name for your reference          |
| **Type**       | Widget or Inline                          |
| **Position**   | (Widget only) Bottom-left or bottom-right |
| **Theme**      | Light or dark mode                        |
| **Categories** | Filter which categories to show           |

## Managing embeds

You can create multiple embeds for different use cases:

* One widget for your main app
* One inline embed for your marketing site
* Different category filters for different audiences

Edit or delete embeds anytime in **Settings → Developer → Embeds**.


# Styling Embeds
Source: https://docs.updates.page/embeds/styling

Customize the look and feel of your embeds

# Styling Embeds

Make your embeds match your brand with custom colors and CSS.

## Theme options

Both widget and inline embeds support light and dark themes:

| Theme     | Best for                          |
| --------- | --------------------------------- |
| **Light** | Light-background apps and sites   |
| **Dark**  | Dark mode apps, dark-themed sites |

Set the theme in your embed settings or via data attribute:

```html theme={null}
<script 
  src="https://cdn.updates.page/widget.js" 
  data-embed-id="your-embed-id"
  data-theme="dark"
  async
></script>
```

\[TODO: ADD IMAGE - LIGHT VS DARK THEME COMPARISON]

## Widget styling

### Position

The widget button can be positioned in the bottom-left or bottom-right corner:

```html theme={null}
<script 
  src="https://cdn.updates.page/widget.js" 
  data-embed-id="your-embed-id"
  data-position="bottom-left"
  async
></script>
```

### Custom CSS

Target widget elements with these CSS selectors:

```css theme={null}
/* Widget button */
.updates-page-widget-button {
  background: #your-brand-color !important;
}

/* Widget panel */
.updates-page-widget-panel {
  font-family: 'Your Font', sans-serif;
}

/* Panel header */
.updates-page-widget-header {
  background: #your-brand-color;
}
```

<Warning>
  Widget styles are injected in a shadow DOM. You may need `!important` to override default styles.
</Warning>

## Inline styling

The inline embed is fully customizable with regular CSS. See [Inline Embed](/embeds/inline) for all available CSS classes.

### Responsive design

The inline embed is responsive by default. Customize breakpoints with media queries:

```css theme={null}
.updates-page-inline {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

@media (max-width: 768px) {
  .updates-page-inline {
    grid-template-columns: 1fr;
  }
}
```

## Color customization

Match your brand colors:

```css theme={null}
/* Category badges */
.updates-page-category[data-category="new"] {
  background: #10B981;
  color: white;
}

.updates-page-category[data-category="improvement"] {
  background: #3B82F6;
  color: white;
}

.updates-page-category[data-category="fix"] {
  background: #F59E0B;
  color: white;
}

/* Links */
.updates-page-title a {
  color: #your-brand-color;
}

.updates-page-title a:hover {
  text-decoration: underline;
}
```

## Typography

Match your site's typography:

```css theme={null}
.updates-page-inline {
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

.updates-page-title {
  font-family: 'Your Heading Font', serif;
  font-weight: 700;
  letter-spacing: -0.02em;
}
```

## Z-index

If the widget appears behind other elements, adjust the z-index:

```css theme={null}
.updates-page-widget-button,
.updates-page-widget-panel {
  z-index: 99999 !important;
}
```


# Widget Embed
Source: https://docs.updates.page/embeds/widget

Add a floating changelog widget to your app

# Widget Embed

The widget embed adds a floating button to your app that opens a slide-out panel with your announcements.

\[TODO: ADD GIF - WIDGET BUTTON CLICK -> PANEL OPENS -> SCROLLING THROUGH ANNOUNCEMENTS]

## Installation

### 1. Create a widget embed

1. Go to **Settings → Developer → Embeds**
2. Click **New Embed**
3. Select **Widget** as the type
4. Configure your settings (see below)
5. Click **Create**

### 2. Copy the script

Copy the generated script tag:

```html theme={null}
<script 
  src="https://cdn.updates.page/widget.js" 
  data-embed-id="your-embed-id"
  async
></script>
```

### 3. Add to your site

Paste the script tag before the closing `</body>` tag on every page where you want the widget to appear.

```html theme={null}
<!DOCTYPE html>
<html>
  <head>...</head>
  <body>
    <!-- Your app content -->
    
    <!-- updates.page widget -->
    <script 
      src="https://cdn.updates.page/widget.js" 
      data-embed-id="your-embed-id"
      async
    ></script>
  </body>
</html>
```

## Configuration options

| Option          | Description                     | Default      |
| --------------- | ------------------------------- | ------------ |
| **Position**    | Bottom-left or bottom-right     | Bottom-right |
| **Theme**       | Light or dark                   | Light        |
| **Show badge**  | Display "new" indicator         | Yes          |
| **Badge color** | Color of the notification badge | Red          |
| **Categories**  | Which categories to include     | All          |

\[TODO: ADD IMAGE - WIDGET CONFIGURATION PANEL]

## Customizing the trigger button

### Default button

By default, the widget shows a floating button with a bell icon.

### Custom trigger

To use your own button, add `data-updates-trigger` to any element:

```html theme={null}
<button data-updates-trigger>What's New</button>

<script 
  src="https://cdn.updates.page/widget.js" 
  data-embed-id="your-embed-id"
  data-hide-button="true"
  async
></script>
```

The `data-hide-button="true"` attribute hides the default floating button.

## "New" badge

The widget shows a red badge when there are announcements the user hasn't seen.

\[TODO: ADD IMAGE - WIDGET BUTTON WITH RED BADGE]

### How it works

* Badge appears when new announcements are published
* Disappears when the user opens the widget
* Uses localStorage to track what's been seen

### Disabling the badge

Add `data-hide-badge="true"` to the script tag:

```html theme={null}
<script 
  src="https://cdn.updates.page/widget.js" 
  data-embed-id="your-embed-id"
  data-hide-badge="true"
  async
></script>
```

## JavaScript API

Control the widget programmatically:

```javascript theme={null}
// Open the widget
window.UpdatesPage.open()

// Close the widget
window.UpdatesPage.close()

// Toggle the widget
window.UpdatesPage.toggle()

// Check if widget is open
window.UpdatesPage.isOpen()

// Get unread count
window.UpdatesPage.getUnreadCount()
```

### Example: Open on custom event

```javascript theme={null}
document.querySelector('#whats-new-link').addEventListener('click', () => {
  window.UpdatesPage.open()
})
```

## Framework guides

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

    function App() {
      useEffect(() => {
        const script = document.createElement('script')
        script.src = 'https://cdn.updates.page/widget.js'
        script.dataset.embedId = 'your-embed-id'
        script.async = true
        document.body.appendChild(script)
        
        return () => document.body.removeChild(script)
      }, [])
      
      return <div>...</div>
    }
    ```
  </Accordion>

  <Accordion title="Next.js">
    Use the Script component:

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

    export default function Layout({ children }) {
      return (
        <>
          {children}
          <Script 
            src="https://cdn.updates.page/widget.js"
            data-embed-id="your-embed-id"
            strategy="lazyOnload"
          />
        </>
      )
    }
    ```
  </Accordion>

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

    <script>
    export default {
      mounted() {
        const script = document.createElement('script')
        script.src = 'https://cdn.updates.page/widget.js'
        script.dataset.embedId = 'your-embed-id'
        script.async = true
        document.body.appendChild(script)
      }
    }
    </script>
    ```
  </Accordion>
</AccordionGroup>


# Your First Announcement
Source: https://docs.updates.page/first-announcement

Write and publish your first changelog entry

# Creating Your First Announcement

Let's walk through creating a great first announcement for your changelog.

## What makes a good announcement?

Before we dive in, here are some tips:

<CardGroup>
  <Card title="Be specific" icon="bullseye">
    "Improved dashboard performance by 40%" beats "Made things faster"
  </Card>

  <Card title="Lead with value" icon="star">
    Start with what users can now do, not what you built
  </Card>

  <Card title="Keep it scannable" icon="list">
    Use headings, bullets, and short paragraphs
  </Card>

  <Card title="Show, don't tell" icon="image">
    Screenshots and GIFs help users understand changes
  </Card>
</CardGroup>

## Step-by-step guide

### 1. Click "New Announcement"

From your dashboard, click the **New Announcement** button in the top right.

\[TODO: ADD IMAGE - DASHBOARD WITH NEW ANNOUNCEMENT BUTTON HIGHLIGHTED]

### 2. Write a compelling title

Your title should be clear and specific. Users should know what the update is about at a glance.

<Tabs>
  <Tab title="Good titles ✓">
    * "New: Dark mode is here"
    * "Faster exports with bulk download"
    * "Fixed: Login issues on Safari"
    * "API v2 now available"
  </Tab>

  <Tab title="Weak titles ✗">
    * "New feature"
    * "Bug fixes"
    * "Update"
    * "v2.3.1"
  </Tab>
</Tabs>

### 3. Write your content

Use the rich text editor to describe your update. A good structure:

```markdown theme={null}
## What's new
Brief description of the feature or change.

## How it works
Step-by-step or key details.

## Why we built this
Optional: context on user feedback or your roadmap.
```

\[TODO: ADD IMAGE - EDITOR WITH SAMPLE CONTENT]

### 4. Choose a category

Categories help users filter and scan your changelog. We create three by default:

| Category        | When to use                       |
| --------------- | --------------------------------- |
| **New**         | Brand new features                |
| **Improvement** | Enhancements to existing features |
| **Fix**         | Bug fixes and corrections         |

<Tip>
  You can create custom categories in **Settings → Changelog → Categories**
</Tip>

### 5. Add a cover image (optional)

Cover images make your announcements more eye-catching, especially when shared on social media.

**Recommended specs:**

* Size: 1200 x 630px (2:1 ratio)
* Format: PNG or JPG
* Keep text minimal — it may be cropped on some platforms

\[TODO: ADD IMAGE - ANNOUNCEMENT WITH COVER IMAGE EXAMPLE]

### 6. Preview and publish

Click **Preview** to see how your announcement will look on your public changelog.

When you're happy with it, click **Publish**. Your announcement is now live!

<Note>
  **Pro tip:** You can also save as a draft and come back later, or schedule it for a future date.
</Note>

***

## Announcement templates

Here are some templates to get you started:

<AccordionGroup>
  <Accordion title="New Feature">
    ```markdown theme={null}
    We're excited to introduce [Feature Name]!

    ## What's new
    [Brief description of what users can now do]

    ## How to use it
    1. Go to [location]
    2. Click [button]
    3. [Next step]

    ## What's next
    We're already working on [related improvement]. Stay tuned!
    ```
  </Accordion>

  <Accordion title="Improvement">
    ```markdown theme={null}
    We've made [Feature] even better.

    ## What changed
    - [Improvement 1]
    - [Improvement 2]
    - [Improvement 3]

    ## Why we made this change
    Based on your feedback, we [reason].

    Let us know what you think!
    ```
  </Accordion>

  <Accordion title="Bug Fix">
    ```markdown theme={null}
    We've fixed an issue affecting [description].

    ## What was happening
    [Brief description of the bug]

    ## What we fixed
    [What users can expect now]

    Thanks to everyone who reported this issue!
    ```
  </Accordion>
</AccordionGroup>

***

## Next steps

<Card title="Writing great announcements" icon="pen" href="/announcements/writing">
  Deep dive into announcement best practices
</Card>


# Introduction
Source: https://docs.updates.page/introduction

Beautiful changelogs for modern software teams

# Welcome to updates.page

updates.page is the simplest way to keep your users informed about what's new in your product. Create beautiful, hosted changelog pages in minutes — no coding required.

\[TODO: ADD HERO IMAGE - SPLIT SCREEN SHOWING DASHBOARD + PUBLIC PORTAL]

## Why updates.page?

<CardGroup>
  <Card title="Ship in minutes" icon="rocket">
    Create your first changelog in under 5 minutes. No design skills needed.
  </Card>

  <Card title="Your brand, your domain" icon="globe">
    Custom domains, colors, and CSS. Make it feel like part of your product.
  </Card>

  <Card title="Embeddable anywhere" icon="code">
    Drop a widget into your app or embed announcements directly in your UI.
  </Card>

  <Card title="AI-ready" icon="robot">
    Built-in API and MCP support for AI agents to post updates automatically.
  </Card>
</CardGroup>

## How it works

<Steps>
  <Step title="Create your changelog">
    Sign up and customize your portal with your brand colors and logo.
  </Step>

  <Step title="Write announcements">
    Use our rich editor to write updates. Add images, videos, and code blocks.
  </Step>

  <Step title="Publish">
    Hit publish and your changelog is live. Share the link or embed it in your app.
  </Step>
</Steps>

## Features at a glance

| Feature                 | Free | Pro | Business |
| ----------------------- | ---- | --- | -------- |
| Unlimited announcements | ✓    | ✓   | ✓        |
| Custom subdomain        | ✓    | ✓   | ✓        |
| Categories & tags       | ✓    | ✓   | ✓        |
| Custom domain           | -    | ✓   | ✓        |
| Remove branding         | -    | -   | ✓        |
| API access              | -    | -   | ✓        |
| Team seats              | 1    | 3   | 10       |

<Card title="Ready to get started?" icon="arrow-right" href="/quickstart">
  Follow our quickstart guide to create your first changelog in 5 minutes.
</Card>


# Analytics
Source: https://docs.updates.page/portal/analytics

Track your changelog performance

# Analytics

Understand how users engage with your changelog using built-in analytics or third-party tools.

## Built-in analytics

updates.page tracks basic metrics automatically:

\[TODO: ADD IMAGE - REPORTS DASHBOARD]

### Available metrics

| Metric                | Description                      |
| --------------------- | -------------------------------- |
| **Total views**       | Page views across your portal    |
| **Unique visitors**   | Distinct visitors (cookie-based) |
| **Views over time**   | Daily view trends                |
| **Top announcements** | Most-viewed announcements        |

### Viewing reports

Go to **Reports** in your dashboard to see your analytics.

* Filter by date range (24h, 7d, 30d, 90d, or custom)
* See trends over time
* Identify your most popular announcements

<Note>
  Built-in analytics are privacy-friendly — we don't track personal information or use third-party cookies.
</Note>

## Google Analytics

Add Google Analytics for detailed tracking:

<Steps>
  <Step title="Get your Measurement ID">
    In Google Analytics, go to **Admin → Data Streams → Web** and copy your Measurement ID (starts with `G-`).
  </Step>

  <Step title="Add to updates.page">
    Go to **Settings → Portal → Analytics & SEO** and paste your Measurement ID in the Google Analytics field.
  </Step>

  <Step title="Verify">
    Visit your portal and check Google Analytics Real-Time to confirm data is being received.
  </Step>
</Steps>

\[TODO: ADD IMAGE - GOOGLE ANALYTICS FIELD IN SETTINGS]

### What's tracked

With Google Analytics enabled, you'll see:

* Detailed page views and sessions
* User demographics and location
* Traffic sources
* User behavior flow
* Custom events (if configured)

## Fathom Analytics

Prefer privacy-focused analytics? We support [Fathom](https://usefathom.com):

1. Get your **Site ID** from Fathom
2. Go to **Settings → Portal → Analytics & SEO**
3. Paste your Site ID in the Fathom field

<Tip>
  Fathom is GDPR-compliant and doesn't require cookie consent banners.
</Tip>

## Tracking embed views

Embed widget views are tracked separately. When users view announcements through your embedded widget:

* Views are counted in your reports
* Attributed to the "embed" source
* Visible in the Reports dashboard

## Understanding your data

<AccordionGroup>
  <Accordion title="Which announcements perform best?">
    Check the **Top Announcements** section in Reports. Consider what made these successful — topic, title, timing, or promotion.
  </Accordion>

  <Accordion title="When should I publish?">
    Look at your **Views over time** chart to identify patterns. Publish when your audience is most active.
  </Accordion>

  <Accordion title="Is my changelog getting traffic?">
    If views are low, try:

    * Linking from your app/website
    * Sharing on social media
    * Adding an embed widget
    * Sending email notifications
  </Accordion>
</AccordionGroup>


# Custom Domain
Source: https://docs.updates.page/portal/custom-domain

Use your own domain for your changelog

# Custom Domain Setup

Use your own domain (like `changelog.yourcompany.com`) for a seamless brand experience.

<Note>
  Custom domains are available on the **Pro** and **Business** plans.
</Note>

## Setting up your custom domain

<Steps>
  <Step title="Choose your subdomain">
    We recommend `changelog.yourcompany.com` or `updates.yourcompany.com`.

    <Tip>
      Using a subdomain (not your root domain) is recommended for easier setup and no conflicts with your main site.
    </Tip>
  </Step>

  <Step title="Add the domain in updates.page">
    Go to **Settings → Portal → Domain Name** and enter your full domain (e.g., `changelog.yourcompany.com`).
  </Step>

  <Step title="Configure DNS">
    Add a CNAME record pointing to `cname.updates.page`:

    | Type  | Name      | Value              |
    | ----- | --------- | ------------------ |
    | CNAME | changelog | cname.updates.page |

    <Info>
      DNS changes can take up to 48 hours to propagate, but usually complete within a few minutes.
    </Info>
  </Step>

  <Step title="Verify and enable SSL">
    Click **Verify** in your updates.page settings. Once verified, SSL will be automatically provisioned.
  </Step>
</Steps>

\[TODO: ADD IMAGE - CUSTOM DOMAIN SETTINGS PAGE]

## DNS configuration by provider

<AccordionGroup>
  <Accordion title="Cloudflare">
    1. Go to your domain's DNS settings
    2. Add a CNAME record:
       * **Name:** `changelog` (or your chosen subdomain)
       * **Target:** `cname.updates.page`
       * **Proxy status:** DNS only (gray cloud)

    <Warning>
      Make sure the orange cloud (proxy) is OFF for the CNAME record.
    </Warning>
  </Accordion>

  <Accordion title="GoDaddy">
    1. Go to **My Products → DNS**
    2. Click **Add** under Records
    3. Select **CNAME**
    4. Enter:
       * **Host:** `changelog`
       * **Points to:** `cname.updates.page`
       * **TTL:** 1 Hour
  </Accordion>

  <Accordion title="Namecheap">
    1. Go to **Domain List → Manage → Advanced DNS**
    2. Click **Add New Record**
    3. Select **CNAME Record**
    4. Enter:
       * **Host:** `changelog`
       * **Value:** `cname.updates.page`
       * **TTL:** Automatic
  </Accordion>

  <Accordion title="Route 53 (AWS)">
    1. Go to your hosted zone
    2. Click **Create record**
    3. Enter:
       * **Record name:** `changelog`
       * **Record type:** CNAME
       * **Value:** `cname.updates.page`
       * **TTL:** 300
  </Accordion>

  <Accordion title="Vercel">
    1. Go to your project's **Domains** settings
    2. This is for your main site — for the changelog subdomain, configure in your domain registrar's DNS settings
  </Accordion>
</AccordionGroup>

## Troubleshooting

<AccordionGroup>
  <Accordion title="Domain won't verify">
    * Double-check the CNAME record is pointing to `cname.updates.page`
    * Wait a few minutes for DNS propagation
    * Use [dnschecker.org](https://dnschecker.org) to verify your DNS is propagated
  </Accordion>

  <Accordion title="SSL certificate not working">
    * SSL provisioning can take up to 24 hours
    * Ensure there's no conflicting A record for the same subdomain
    * If using Cloudflare, make sure proxy is disabled (gray cloud)
  </Accordion>

  <Accordion title="Getting a redirect loop">
    * If using Cloudflare, set SSL mode to "Full" or "Full (strict)"
    * Disable any page rules that might interfere
  </Accordion>
</AccordionGroup>

## Using a root domain

We recommend using a subdomain, but if you must use a root domain (`yourcompany.com`):

1. Your DNS provider must support CNAME flattening (Cloudflare, Route 53)
2. Create an ALIAS or CNAME record for `@` pointing to `cname.updates.page`

<Warning>
  Using a root domain may conflict with your main website. Proceed with caution.
</Warning>


# Customization
Source: https://docs.updates.page/portal/customization

Make your changelog match your brand

# Portal Customization

Customize your changelog portal to match your brand identity.

## Basic customization

Navigate to **Settings → Portal → Customize** to access these options:

\[TODO: ADD IMAGE - CUSTOMIZATION SETTINGS PANEL]

### Logo

Upload your company logo to display in the portal header.

* **Recommended size:** 200x200px minimum
* **Formats:** PNG, JPG, SVG
* **Tips:** Use a square logo or one with transparent background

### Colors

| Setting               | Description                          |
| --------------------- | ------------------------------------ |
| **Primary color**     | Used for buttons, links, and accents |
| **Background color**  | Main page background                 |
| **Header background** | Portal header area                   |

<Tip>
  Use your brand's primary color for the best recognition. Make sure there's enough contrast for readability.
</Tip>

### Header content

Customize what appears in your portal header:

* **Title** — Main headline (e.g., "What's New" or "Changelog")
* **Description** — Subtitle text explaining your changelog
* **Show logo** — Toggle logo visibility
* **Show subscribe button** — Let users subscribe for email updates

## Advanced customization

### Custom CSS

For complete control, add custom CSS in **Settings → Portal → Customize → Custom CSS**.

```css theme={null}
/* Example: Change the announcement title font */
.announcement-title {
  font-family: 'Georgia', serif;
  font-size: 28px;
}

/* Example: Add a border to category badges */
.category-badge {
  border: 2px solid currentColor;
}

/* Example: Customize the header */
.portal-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
```

<Warning>
  Custom CSS can break your portal if used incorrectly. Test changes carefully.
</Warning>

### Available CSS classes

| Class                   | Element                |
| ----------------------- | ---------------------- |
| `.portal-header`        | Header container       |
| `.portal-nav`           | Navigation area        |
| `.announcement-card`    | Announcement list item |
| `.announcement-title`   | Announcement title     |
| `.announcement-content` | Announcement body      |
| `.category-badge`       | Category tag           |
| `.author-info`          | Author name and avatar |
| `.powered-by`           | Footer branding        |

\[TODO: ADD IMAGE - CSS INSPECTOR SHOWING AVAILABLE CLASSES]

## Preview changes

Use the **Preview** button to see your changes before saving. The preview opens in a new tab showing your live portal with unsaved changes applied.

## Examples

<CardGroup>
  <Card title="Minimal">
    Clean white background, single accent color, hidden header description
  </Card>

  <Card title="Bold">
    Gradient header, large logo, vibrant category colors
  </Card>

  <Card title="Dark mode">
    Dark background with light text (via custom CSS)
  </Card>

  <Card title="On-brand">
    Full brand colors, custom fonts, matching your main site
  </Card>
</CardGroup>

\[TODO: ADD IMAGE - GRID OF 4 EXAMPLE PORTAL STYLES]


# Portal Overview
Source: https://docs.updates.page/portal/overview

Your public changelog page

# Portal Overview

Your portal is your public-facing changelog page where users can see all your announcements.

\[TODO: ADD IMAGE - EXAMPLE PORTAL PAGE]

## Your portal URL

Every updates.page account gets a free subdomain:

```
https://yourcompany.updates.page
```

You can also [set up a custom domain](/portal/custom-domain) like `changelog.yourcompany.com`.

## Portal features

<CardGroup>
  <Card title="Customizable design" icon="palette">
    Match your brand with custom colors, logo, and CSS
  </Card>

  <Card title="Category filtering" icon="filter">
    Users can filter announcements by category
  </Card>

  <Card title="RSS feed" icon="rss">
    Automatic RSS feed for subscribers
  </Card>

  <Card title="SEO optimized" icon="search">
    Meta tags, Open Graph, and structured data included
  </Card>
</CardGroup>

## Portal settings

Configure your portal in **Settings → Portal**:

| Setting         | Description                             |
| --------------- | --------------------------------------- |
| **Logo**        | Your company logo (displayed in header) |
| **Favicon**     | Browser tab icon                        |
| **Colors**      | Primary and background colors           |
| **Title**       | Custom page title (for SEO)             |
| **Description** | Meta description (for SEO)              |
| **Custom CSS**  | Advanced styling overrides              |

\[TODO: ADD IMAGE - PORTAL SETTINGS PAGE]

## What users see

Your portal displays:

1. **Header** — Your logo and navigation
2. **Announcement list** — Chronological feed of updates
3. **Category filters** — Optional filter buttons
4. **Individual announcements** — Full content when clicked
5. **Footer** — "Powered by updates.page" (removable on Business plan)

## RSS feed

Your portal automatically includes an RSS feed at:

```
https://yourcompany.updates.page/changelog/rss
```

Users can subscribe to get notified of new announcements in their RSS reader.

<Tip>
  Link to your RSS feed from your main website or app to help users stay updated.
</Tip>

## Analytics

Track portal performance with:

* **Built-in analytics** — View counts and top announcements
* **Google Analytics** — Add your GA tracking ID
* **Fathom** — Add your Fathom site ID

See [Analytics setup](/portal/analytics) for details.


# SEO Settings
Source: https://docs.updates.page/portal/seo

Optimize your changelog for search engines

# SEO Settings

Make your changelog discoverable in search engines and look great when shared on social media.

## Meta tags

Configure your portal's meta tags in **Settings → Portal → Analytics & SEO**:

| Setting              | Description                   | Recommendation                                       |
| -------------------- | ----------------------------- | ---------------------------------------------------- |
| **Meta title**       | Page title in search results  | "\[Company] Changelog" or "What's New at \[Company]" |
| **Meta description** | Description in search results | 150-160 characters describing your changelog         |

\[TODO: ADD IMAGE - SEO SETTINGS PANEL]

## How it works

updates.page automatically generates:

### For your portal index

* `<title>` — Your meta title
* `<meta name="description">` — Your meta description
* `<link rel="canonical">` — Canonical URL
* Open Graph tags for social sharing
* Twitter Card tags
* JSON-LD structured data (WebSite schema)

### For individual announcements

* `<title>` — "\[Announcement Title] - \[Meta Title]"
* `<meta name="description">` — Announcement summary
* `<link rel="canonical">` — Announcement URL
* Open Graph tags with announcement details
* Twitter Cards (large image if cover image exists)
* JSON-LD structured data (Article schema)

## Social sharing preview

When your changelog or announcements are shared on social media, they'll display:

* **Title** — Page or announcement title
* **Description** — Meta description or announcement summary
* **Image** — Cover image (if set) or your logo

\[TODO: ADD IMAGE - SOCIAL SHARE PREVIEW EXAMPLE (TWITTER/LINKEDIN)]

<Tip>
  Use [opengraph.xyz](https://opengraph.xyz) to preview how your pages will look when shared.
</Tip>

## Search engine indexing

By default, your portal is indexable by search engines. To prevent indexing:

1. Go to **Settings → Portal → Analytics & SEO**
2. Enable **"No Index"**
3. This adds `<meta name="robots" content="noindex, nofollow">` to your portal

<Note>
  Use "No Index" if your changelog is internal-only or you don't want it appearing in search results.
</Note>

## Best practices

<AccordionGroup>
  <Accordion title="Write descriptive titles">
    Include your company name and keywords like "changelog," "updates," or "what's new."
  </Accordion>

  <Accordion title="Use announcement summaries">
    The first \~160 characters of your announcement become the meta description. Make them count.
  </Accordion>

  <Accordion title="Add cover images">
    Announcements with cover images get better engagement when shared on social media.
  </Accordion>

  <Accordion title="Use a custom domain">
    `changelog.yourcompany.com` looks more professional and may rank better than a subdomain.
  </Accordion>
</AccordionGroup>

## RSS feed for SEO

Your RSS feed (`/changelog/rss`) helps search engines discover new content and enables users to subscribe.

Add a link to your RSS feed from your main website:

```html theme={null}
<link rel="alternate" type="application/rss+xml" title="Changelog" href="https://changelog.yourcompany.com/changelog/rss" />
```


# Quickstart
Source: https://docs.updates.page/quickstart

Create your changelog in under 5 minutes

# Quickstart Guide

Get your changelog up and running in just a few steps.

## 1. Create your account

Head to [app.updates.page/signup](https://app.updates.page/signup) and create your account. You'll be asked for:

* Your email address
* Your company or product name
* A subdomain (e.g., `yourcompany.updates.page`)

\[TODO: ADD IMAGE - SIGNUP FLOW / ONBOARDING SCREEN]

## 2. Customize your portal

After signing up, you'll land in the dashboard. Let's make it yours:

<Steps>
  <Step title="Add your logo">
    Go to **Settings → Portal → Customize** and upload your logo. We recommend a square image at least 200x200px.
  </Step>

  <Step title="Set your colors">
    Choose a primary color that matches your brand. This will be used for buttons, links, and accents.
  </Step>

  <Step title="Write a welcome message">
    Optionally add a headline and description that appears at the top of your changelog.
  </Step>
</Steps>

\[TODO: ADD IMAGE - CUSTOMIZATION PANEL]

## 3. Create your first announcement

Click **New Announcement** in the top right corner.

<Tabs>
  <Tab title="Writing">
    Use the rich text editor to write your update. You can:

    * Format text with **bold**, *italic*, and `code`
    * Add headings (H1, H2)
    * Create bullet and numbered lists
    * Insert images and videos
    * Add code blocks with syntax highlighting
  </Tab>

  <Tab title="Metadata">
    Before publishing, set:

    * **Category** — New, Improvement, Fix, or create your own
    * **Author** — Who wrote this update
    * **Cover image** — Optional hero image for the announcement
  </Tab>
</Tabs>

\[TODO: ADD IMAGE - ANNOUNCEMENT EDITOR]

## 4. Publish!

When you're ready, click **Publish**. Your announcement is now live at your changelog URL.

<Note>
  You can also save as a draft and publish later, or schedule announcements for future dates.
</Note>

## 5. Share your changelog

Your changelog is live at:

```
https://yourcompany.updates.page
```

Share this link with your users, or:

* [Set up a custom domain](/portal/custom-domain) like `changelog.yourcompany.com`
* [Embed a widget](/embeds/widget) in your app
* [Add an inline embed](/embeds/inline) to your website

***

## What's next?

<CardGroup>
  <Card title="Writing great announcements" icon="pen" href="/announcements/writing">
    Tips for writing updates your users will actually read.
  </Card>

  <Card title="Custom domain setup" icon="globe" href="/portal/custom-domain">
    Use your own domain for a seamless brand experience.
  </Card>

  <Card title="Embed in your app" icon="code" href="/embeds/overview">
    Show updates directly inside your product.
  </Card>

  <Card title="Invite your team" icon="users" href="/team/members">
    Collaborate with teammates on announcements.
  </Card>
</CardGroup>


# Team Members
Source: https://docs.updates.page/team/members

Invite teammates to collaborate on your changelog

# Team Members

Invite your team to collaborate on announcements.

## Inviting members

<Steps>
  <Step title="Go to Team settings">
    Navigate to **Settings → Team → Members**
  </Step>

  <Step title="Click Invite">
    Click the **Invite Member** button
  </Step>

  <Step title="Enter their email">
    Enter their email address and select a role
  </Step>

  <Step title="Send invite">
    They'll receive an email with a link to join
  </Step>
</Steps>

\[TODO: ADD IMAGE - INVITE MEMBER MODAL]

## Seat limits

Each plan includes a number of seats:

| Plan     | Included Seats |
| -------- | -------------- |
| Free     | 1              |
| Pro      | 3              |
| Business | 10             |

<Note>
  Need more seats? Contact us for custom plans.
</Note>

## Managing members

### Viewing members

Go to **Settings → Team → Members** to see all team members, their roles, and when they joined.

\[TODO: ADD IMAGE - TEAM MEMBERS LIST]

### Removing members

1. Find the member in the list
2. Click the **...** menu
3. Select **Remove from team**

The member will lose access immediately.

### Changing roles

1. Find the member in the list
2. Click the **...** menu
3. Select **Change role**
4. Choose the new role

See [Roles & Permissions](/team/roles) for role details.

## Pending invites

Invites expire after 7 days. To resend:

1. Go to **Settings → Team → Members**
2. Find the pending invite
3. Click **Resend invite**

To cancel a pending invite, click **Revoke**.


# Roles & Permissions
Source: https://docs.updates.page/team/roles

Understand team member roles and what they can do

# Roles & Permissions

Control what team members can do with role-based permissions.

## Available roles

| Role       | Description                                       |
| ---------- | ------------------------------------------------- |
| **Owner**  | Full access to everything, including billing      |
| **Admin**  | Full access except billing and ownership transfer |
| **Member** | Can create and manage announcements               |

## Permission matrix

| Permission             | Owner | Admin | Member |
| ---------------------- | ----- | ----- | ------ |
| Create announcements   | ✓     | ✓     | ✓      |
| Edit own announcements | ✓     | ✓     | ✓      |
| Edit all announcements | ✓     | ✓     | ✗      |
| Delete announcements   | ✓     | ✓     | ✗      |
| Publish announcements  | ✓     | ✓     | ✓      |
| Manage categories      | ✓     | ✓     | ✗      |
| Portal settings        | ✓     | ✓     | ✗      |
| Invite members         | ✓     | ✓     | ✗      |
| Remove members         | ✓     | ✓     | ✗      |
| Change member roles    | ✓     | ✓     | ✗      |
| Billing & subscription | ✓     | ✗     | ✗      |
| Transfer ownership     | ✓     | ✗     | ✗      |
| Delete account         | ✓     | ✗     | ✗      |

## Changing roles

Only Owners and Admins can change roles:

1. Go to **Settings → Team → Members**
2. Click the **...** menu next to a member
3. Select **Change role**
4. Choose the new role

<Warning>
  You cannot change your own role. Another Owner or Admin must do it.
</Warning>

## Transferring ownership

To transfer account ownership:

1. Go to **Settings → Team → General**
2. Click **Transfer ownership**
3. Select the new owner (must be an existing team member)
4. Confirm the transfer

<Warning>
  Ownership transfer is permanent. You'll become an Admin after transferring.
</Warning>

## Best practices

<CardGroup>
  <Card title="Limit Owners" icon="shield">
    Only give Owner access to people who need billing access
  </Card>

  <Card title="Use Admin for managers" icon="user-shield">
    Team leads who need full content control but not billing
  </Card>

  <Card title="Member for contributors" icon="user">
    Writers who create content but don't manage settings
  </Card>

  <Card title="Review regularly" icon="clock">
    Remove access for people who leave the team
  </Card>
</CardGroup>