🔔 Bellotify Docs
Everything you need to set up and use Bellotify — from installation to customization.
1What is Bellotify?
Bellotify adds a smart notification bell to your website so your users never miss important reminders, messages, or updates. The bell appears naturally inside your platform, while AI helps you write better updates in seconds.
You can also track who viewed each notification and collect instant feedback through 👍 👎 reactions or text responses.
Bellotify works with any website or web app — no framework lock-in. One script tag is all it takes.
2Getting Started
Go to bellotify.com and click Get Started. Enter your email and create a password.
Check your inbox for a confirmation email and click the verification link.
Log in. You'll land on the Bellotify dashboard where you can manage entries, settings, and more.
3Writing a New Entry
Entries are the updates, changelogs, or announcements that appear in the notification bell panel.
Find this button at the top left of your dashboard.
Choose a title and a category, then write your entry content.
Click the AI button to generate a draft automatically — then edit it to match your tone.
A live preview on the left side shows exactly how your entry will look to your users.
Choose when to publish, then save as a Draft or click Publish to go live immediately.
Pro users can schedule entries in advance. Set a future date and Bellotify will publish automatically.
4Installation
Go to Settings → Widget in your dashboard to get your unique script tag.
Plain HTML
Paste the script tag before the closing </body> tag on every page.
WordPress
Use the "Insert Headers and Footers" plugin to add the script site-wide.
React / Next.js
Add the script to your _document.js or a layout component.
Vue / Nuxt
Add via useHead() or the script head option in nuxt.config.js.
On HTML (any static website)
- Copy the script tag shown in your dashboard.
- Paste it just before the closing
</body>tag on every page where you want the bell to appear. - Save your files and reload your site — the bell will appear.
On WordPress
- Install the plugin "Insert Headers and Footers" (or WPCode).
- Go to Settings → Insert Headers and Footers.
- Paste the Bellotify script into the Header section.
- Click Save — the bell will appear on every page of your WordPress site.
Replace YOUR_SITE_ID with the unique ID shown in your Settings → Widget page.
5Adjust the Appearance of the Bell
Go to Settings → Widget in your dashboard.
Below the installation code snippet, you'll find settings to change the look of the bell, the notification panel, and its behavior. A live preview on the right side updates in real time.
Choose where the bell appears — bottom-right, bottom-left, or a custom position.
Set the bell icon color, badge color, and notification panel background to match your brand.
Use the default bell icon or upload your own custom icon image.
Adjust border radius, shadow depth, and font size of the notification panel.
Pro plan: remove the "Powered by Bellotify" footer from the widget panel.
6Allowed Widget Domains
Go to Settings → Public Page.
Here you control which websites are allowed to display the notification bell. The domain you registered with is automatically allowed.
Enter the full URL (e.g. https://yoursite.com) in the input field and click Add.
The new domain will appear in the list. You can edit or delete any entry at any time.
If the allowed domains list is empty, embedding the widget on any external site will be blocked.
7Adjust Timezone
Go to Settings → Account.
Under Timezone, select the timezone Bellotify uses when displaying and recording publish timestamps for your entries. This ensures scheduled posts go live at the correct local time.
If your users span multiple regions, set the timezone to match your company's primary location.