Onpane

Quick Start

Add the Onpane announcement widget to your website with a single script tag. No build step or framework integration required.

Installation

Add the following script tag to your website, just before the closing </body> tag:

HTML
<script
  src="https://onpane.com/widget/loader.js"
  data-key="onpane_live_YOUR_KEY_HERE"
></script>

Replace onpane_live_YOUR_KEY_HERE with your project's API key from the Onpane dashboard.

Get Your API Key

  1. Sign in to your Onpane dashboard
  2. Create a new project or select an existing one
  3. Go to Settings to find your API key (starts with onpane_live_)
  4. Copy the embed code snippet which includes your key

Create Your First Announcement

  1. In your project dashboard, click New Announcement
  2. Enter your message text
  3. Optionally add a title, icon, and call-to-action link
  4. Set a start date (defaults to now)
  5. Click Activate to publish -- your announcement is now live

See It in Action

  1. Visit your website
  2. Your announcement bar appears at the top or bottom of the page (based on your widget settings)
  3. For details, open the browser console — Onpane logs load and display events with the [Onpane] prefix

Need help? Check the Troubleshooting guide for common setup questions.

If your security policy requires serving scripts from your own domain, see the Self-Hosting guide.