Quick Start

Prerequisites

Before you start, make sure you have:

Solana Wallet: Any Solana wallet (Phantom, Solflare, etc.)
Development Environment: Node.js 16+ installed
Basic Knowledge: React components and wallet connections

Video Tutorial

Watch the complete walkthrough to see exactly how it works.

Chapters

00:00 Send your first alert in 15 minutes
00:25 Prerequisites
03:13 Register your app
05:37 Setup a clean project
07:36 Implementation
13:38 Signup for messages
14:55 Send message to a wallet

What You’ll Build

By the end of this tutorial, you’ll have:

✅ A working notification bell in your React app
✅ Users can subscribe to receive notifications
✅ Dashboard to compose and send notifications
✅ Your first notification successfully delivered

Time Required: ~15 minutes

Step 1: Register Your App (3 minutes)

Create a New Wallet

Create a dedicated wallet for your app registration. This keeps your app’s identity separate from your personal wallet and provides better security.

In your Solana wallet app:

Create a new wallet (most wallet apps have an “Add Wallet” or ”+” option)
Name it something like “My App Notifications”
Copy the wallet address - you’ll need this for registration

Connect and Register

Visit: https://dashboard.dialect.to/
Click: “Alerts” in the left sidebar
Click: “Guide” tab (don’t get confused by “Compose”)
Connect: Your new wallet (not your main wallet)
Sign: The message to authenticate

Complete Registration

Fill out your app information:

Project Logo: Upload your app’s logo
Project Name: Your application name
Description: Brief description of your app

Click “Register” and wait for the ✅ confirmation.

Save Your App Address

Important: Copy your app address from the bottom-left corner (click “Copy Address”). This should match the public key of the wallet you just created.

# This is your app's public key - save it!
dappAddress=5XCdQVqopjAoVkNhkXWHmeHNhRS5bPiATUULy8FHDySX

Note: This address will be used to initialize the Dialect SDK in your React component (Step 3).

Step 2: Set Up Your Project (3 minutes)

If you already have an existing React/Next.js project, you can skip this step and jump directly to Step 3: Add Notification Bell. The notification bell works with any React application.

Clone the Scaffold

We’ll start with a fresh project using the Solana app scaffold:

# Create a new Solana dApp scaffold
npx create-solana-dapp@latest alerts-tutorial

# Choose your options when prompted:
# - Framework: Next.js (A React framework by Vercel)
# - Template: gill-next-tailwind (Next.js, Tailwind, gill based on @solana/kit, Wallet UI)

# Navigate to the project
cd alerts-tutorial

# Start development server
npm run dev

Open http://localhost:3000 to verify your scaffold is running correctly.

Step 3: Add Notification Bell (4 minutes)

Install Dialect Packages

npm install @dialectlabs/react-ui @dialectlabs/react-sdk-blockchain-solana

Create Notification Component

Create a new file src/components/DialectNotificationComponent.tsx:

src/components/DialectNotificationComponent.tsx

"use client";

import "@dialectlabs/react-ui/index.css";
import { DialectSolanaSdk } from "@dialectlabs/react-sdk-blockchain-solana";
import { NotificationsButton } from "@dialectlabs/react-ui";

// Replace with your actual app address from Step 1
const dappAddress = "5XCdQVqopjAoVkNhkXWHmeHNhRS5bPiATUULy8FHDySX";

export const DialectNotificationComponent = () => {
  return (
    <DialectSolanaSdk
      dappAddress={dappAddress}
      config={{
        environment: "production",
      }}
    >
      <NotificationsButton />
    </DialectSolanaSdk>
  );
};

Add the notification bell to your app’s header next to the wallet button. Find the header file src/components/app-header.tsx and add the notification component:

src/components/app-header.tsx

// Add this import at the top with the other imports
import { DialectNotificationComponent } from "@/components/DialectNotificationComponent";

// Find the section with the wallet and other buttons, then add the component:
<div className="hidden md:flex items-center gap-4">
  <DialectNotificationComponent />
  <WalletButton />
  <ClusterButton />
  <ThemeSelect />
</div>

Test the Component

Screenshot highlighting Alert Bell icon in Navigation Bar incl. Modal

Refresh your browser and you should see the notification bell next to your wallet button and cluster selector in the top navigation.

Step 4: User Subscribes to Notifications (2 minutes)

In the next step, your users need to opt-in into notifications:

Connect Wallet: User connects their wallet to your app
Click Bell: User clicks the notification bell
Set Up Notifications: Click “Set up notifications”
Enable Notifications: Make sure the toggle is “ON” (very important!)
Choose Additional Channels:
- 📧 Email: User can optionally add their email
- 📱 Telegram: User can optionally add their Telegram handle

Step 5: Send Your First Notification (3 minutes)

Now send a notification using the dashboard:

Using the Dashboard

Go back to: https://dashboard.dialect.to
Click: “Compose” tab
You’ll see: “1 subscriber” (the user who just signed up)
Write your message:
- Title: ”🎉 Welcome to My App!”
- Body: “This is your first notification from [Your App Name]”
Click: “Send”

Verify It Works

Notification received via React UI component

Go back to your app and:

The notification bell should show a green dot (unread notification)
Click the bell to see your message: “Welcome to My App!”
The message shows “This is your first notification…”

🎉 Congratulations! You’ve sent your first notification!

Troubleshooting

❌ “No subscribers found”

Make sure the user clicked the bell and enabled notifications
Very important: Check that the toggle is “ON” in the notification settings (sometimes it defaults to “OFF”)

❌ “Component not rendering”

Ensure you imported the CSS: import "@dialectlabs/react-ui/index.css"
Check that your app address is correct
Verify wallet connection is working

❌ “User not receiving notifications”

User must connect wallet and enable notifications first
Check dashboard analytics to see delivery status
Verify the target wallet address is correct

Customization

Want to customize the look and feel of your notification bell? Check out our Event Detection and Monitoring guide where you can see how companies like Tensor have customized the notification widget to match their brand. You’ll find detailed styling options including:

Custom colors and themes
Component styling with CSS
Complete customization examples

Learn More

Sending Guide - Send alerts to your users either programmatic or by using or no-code Dashboard
Universal Inbox Guide - Integrate an Inbox using APIs or advanced UI components
Event Detection and Monitoring: Use events to send notifications to your users
API Guide - Get an overview of available API endpoints

🎉 You’re all set! You now have notifications working in your app. Your users can receive important updates directly in their wallets, and you can reach them programmatically from your backend.

GETTING STARTED

SETUP

INTEGRATE AN INBOX

SEND ALERTS

MOBILE ALERTS STACK

EVENT DETECTION & MONITORING

API REFERENCE

Prerequisites

Video Tutorial

Chapters

What You’ll Build

Step 1: Register Your App (3 minutes)

Create a New Wallet

Connect and Register

Complete Registration

Save Your App Address

Step 2: Set Up Your Project (3 minutes)

Clone the Scaffold

Step 3: Add Notification Bell (4 minutes)

Install Dialect Packages

Create Notification Component

Add to Your App Header

Test the Component

Step 4: User Subscribes to Notifications (2 minutes)

Step 5: Send Your First Notification (3 minutes)

Using the Dashboard

Verify It Works

Troubleshooting

❌ “No subscribers found”

❌ “Component not rendering”

❌ “User not receiving notifications”

Customization

Learn More

GETTING STARTED

SETUP

INTEGRATE AN INBOX

SEND ALERTS

MOBILE ALERTS STACK

EVENT DETECTION & MONITORING

API REFERENCE

​Prerequisites

​Video Tutorial

​Chapters

​What You’ll Build

​Step 1: Register Your App (3 minutes)

​Create a New Wallet

​Connect and Register

​Complete Registration

​Save Your App Address

​Step 2: Set Up Your Project (3 minutes)

​Clone the Scaffold

​Step 3: Add Notification Bell (4 minutes)

​Install Dialect Packages

​Create Notification Component

​Add to Your App Header

​Test the Component

​Step 4: User Subscribes to Notifications (2 minutes)

​Subscribe Process

​Step 5: Send Your First Notification (3 minutes)

​Using the Dashboard

​Verify It Works

​Troubleshooting

​❌ “No subscribers found”

​❌ “Component not rendering”

​❌ “User not receiving notifications”

​Customization

​Learn More

Prerequisites

Video Tutorial

Chapters

What You’ll Build

Step 1: Register Your App (3 minutes)

Create a New Wallet

Connect and Register

Complete Registration

Save Your App Address

Step 2: Set Up Your Project (3 minutes)

Clone the Scaffold

Step 3: Add Notification Bell (4 minutes)

Install Dialect Packages

Create Notification Component

Add to Your App Header

Test the Component

Step 4: User Subscribes to Notifications (2 minutes)

Subscribe Process

Step 5: Send Your First Notification (3 minutes)

Using the Dashboard

Verify It Works

Troubleshooting

❌ “No subscribers found”

❌ “Component not rendering”

❌ “User not receiving notifications”

Customization

Learn More