How to use ToastUp

Everything you need to know to create high-converting toasts, collect leads, and track your success.

1. Getting Started

Welcome to ToastUp! The first step to showing toasts on your website is installing the widget snippet.

  1. Go to Dashboard → Websites.
  2. Add your website domain (e.g., yoursite.com) to generate a unique site key and install snippet.
  3. Copy the provided <script> tag and paste it into the <head> tag of your website.
  4. Create a toast, choose a Targeting website, and publish it. Draft toasts stay private until you publish.

Inside the toast editor you can also click Install Snippet near the Targeting website field. The snippet updates automatically for the selected website, so you don't need to leave the editor.

💡 Pro tip: You only need to install the snippet once per website. All toasts created in the dashboard will automatically appear on your site without any further code changes.

2. Creating Toasts

Toasts are the notifications that appear on your website. To create one:

  • Click + New toast in your dashboard.
  • Content: add a catchy title, a short description, and choose an emoji or upload a custom image icon.
  • Design: choose a preset, adjust colors, shape, shadow, and font.
  • CTA & Leads: add a button URL, optional countdown timer, or replace the CTA with an email/phone lead form.
  • Behavior: set position, timing, frequency, devices, exit-intent, branding, sound, and analytics events.
  • Targeting: choose the website, URL rules, excluded paths, and copy the install snippet for the selected website.
  • Schedule: optionally limit the toast to days and hours.
  • Preview: use the live preview to check desktop/mobile layout and light/dark page background before publishing.

The editor validates required settings when you save or publish, including safe CTA URLs, website selection, URL targeting, device visibility, and schedule times.

3. Styling & Icons

Use the Style controls to make each toast match your brand instead of looking like a stock notification.

  • Theme presets: start from ToastUp, minimal, dark, soft, or custom styles.
  • Colors: customize primary accents, toast background, text/border color, CTA text, and icon tile background.
  • Shape: adjust corner radius and toggle shadow for a flatter or more playful look.
  • Fonts: choose system, modern, rounded, serif, display, mono, or casual to match the tone of your site.
  • Icons: use an emoji from the picker or upload a PNG, JPG, GIF, or WebP image up to 2 MB.
💡 Pro tip: Custom styles are saved per toast, so a pricing-page urgency toast can look different from a subtle product update toast.

4. Translations

Use Translations inside the Content block to show visitors a localized version of your toast based on their browser language.

  1. Open a toast in the editor and scroll to Content → Translations.
  2. Click Add translation and choose a language from the dropdown.
  3. Click Edit translation to open the translation popup.
  4. Fill only the fields you want to translate: title, message, CTA text, lead placeholder, or lead button text.
  5. Save draft or publish the toast. ToastUp stores only translations you added.

English remains the default version. If a translated field is empty, ToastUp automatically falls back to the original English field.

💡 Pro tip: RTL languages are not supported in the basic localization flow yet. Add LTR translations only.

5. CTA & Leads

The CTA & Leads block controls the action inside the toast.

  • Button label: text shown on the CTA button. Leave it empty to hide the button.
  • Destination URL: link to a page, offer, checkout, mailto link, phone link, or relative path like /pricing.
  • Show countdown timer: append an urgency timer under the body text. Set seconds to 0 to turn it off.
  • Collect leads: replace the CTA button with an email or phone input. This is available on paid plans.
  • Lead capture settings: choose Email or Phone, customize the placeholder and submit button, and optionally send submissions to Zapier.

When a user submits their information, it's saved to your account with the related toast. You can view and export collected leads from the Leads page in your dashboard.

💡 Pro tip: When Collect leads is enabled, the CTA button is replaced by the lead form inside the toast.

6. Behavior

The Behavior block controls when the toast appears and how often visitors see it.

  • Position: choose where the toast appears, such as bottom-left, top-right, or bottom-center.
  • Trigger after: how many seconds to wait before showing the toast after the page loads.
  • Hide after: automatically dismiss the toast after a number of seconds.
  • Send again every: re-show the toast after a custom interval.
  • Frequency: Choose how often a user sees the toast (Once per session, Every page load, Every 24 hours, or Always).
  • Devices: toggle visibility for Desktop and Mobile independently.
  • Exit-intent trigger: show when the visitor moves to close the tab.
  • Branding, sound, and tracking: paid plans can hide ToastUp branding, play a sound effect, and send events to GA4 / Meta Pixel.

7. Targeting & Install

The Targeting block chooses the website and page rules for the toast.

  • Website: choose where this toast belongs. Publishing requires a selected website.
  • Install snippet: copy the correct script for the selected website without leaving the toast editor.
  • Show on URLs: target all pages, an exact path like /pricing, paths that start with a prefix like /blog*, or URLs that contain a specific word.
  • Exclude paths: keep a toast off pages like /auth/login, /checkout/success, or /privacy even when the main rule is broad.
💡 Pro tip: Use broad rules like All pages with exclude paths when the toast should appear almost everywhere except checkout, login, or private pages.

8. Schedule

The Schedule block limits a toast to selected days and hours.

  • Enable schedule only when a campaign should run at specific times.
  • Choose days of the week, or leave days empty to allow every day.
  • Set start and end hours, including overnight windows such as 21:00 → 02:00.
  • Use different start and end hours. If schedule is disabled, the toast can show anytime.
💡 Pro tip: If no schedule days are selected, ToastUp treats it as every day. Use specific days only when a campaign should run on a limited weekly schedule.

9. Integrations & Zapier

Available on Basic and PRO plans. Zapier lets you send collected leads from ToastUp to tools like Google Sheets, HubSpot, Slack, email, Airtable, Notion, and more.

Set up Zapier

  1. In Zapier, create a new Zap.
  2. Choose Webhooks by Zapier as the trigger.
  3. Select Catch Hook.
  4. Copy the webhook URL from Zapier.
  5. In ToastUp, open Dashboard → Integrations → Zapier.
  6. Enable Zapier, paste the Catch Hook URL, and click Save integration.
  7. Click Send test lead. Then return to Zapier and continue configuring the action.

Enable Zapier per toast

  1. Open a toast and enable Collect Leads.
  2. Enable Send leads to Zapier.
  3. Save or publish the toast.

Payload sent to Zapier

  • Lead type and value: email or phone
  • Toast id, title, and body
  • Website id, domain, and site key
  • Page URL and visitor id
  • Created timestamp
💡 Pro tip: Zapier delivery is retried automatically for failed lead deliveries. ToastUp also stores a delivery audit trail without duplicating the lead value in the delivery table.

Zapier URLs are treated like secrets in the UI and hidden by default. Only use this integration if your site privacy notice covers forwarding leads to Zapier and connected apps.

10. Analytics & Events

ToastUp tracks Impressions (how many times a toast was seen), Clicks, CTR, and collected leads.

  • Workspace analytics: View total impressions, clicks, CTR, active toasts, and recent performance.
  • Toast analytics: Open an individual toast to see its impressions/clicks trend and performance breakdown.
  • Lead reporting: lead capture submissions are visible in the Leads page and can be exported.
  • Third-party events: Basic/PRO plans can enable Send events to GA4 / Meta Pixel. ToastUp detects installed analytics tools and sends toastup_impression and toastup_click events.

11. Templates

Not sure what to write? The template library gives you ready-made toasts for common conversion moments — one click fills the form, you just add your URL.

How to use

  1. Go to Dashboard → New toast.
  2. Click the Template library button in the top-right.
  3. Filter by category and pick a template.
  4. The form is pre-filled with title, description, emoji, CTA text, and countdown. Add your destination URL, choose Targeting, and publish.

Categories

  • SaaS — trial urgency, feature launches, onboarding, upgrade prompts
  • E-commerce — flash sales, cart abandonment, low stock, new arrivals
  • Info business — lead magnets, course launches, newsletters, coaching
  • Discounts — first-order codes, limited-time deals, loyalty rewards
💡 Pro tip: Templates pre-fill content fields (title, description, emoji, CTA, countdown). Targeting settings like delay, frequency, URL rules, website, and schedule are always left for you to configure per site.

12. Install & Platforms

ToastUp works anywhere you can paste one script tag. The Websites page lets you add websites, select the active site, copy the correct snippet, and follow platform-specific instructions.

Each website gets its own data-site key. Assign each toast to the website where it should appear.

13. Sound & Branding

Available on Basic and PRO plans. Add an audio cue that plays the moment your toast appears — great for flash sales, urgent offers, and grabbing attention.

How to enable

  1. Open the toast editor and scroll to the Behavior block.
  2. Toggle on 🔔 Sound effect.
  3. Pick one of the 5 preset sounds and adjust the volume slider.
  4. Click ▶ Preview sound to hear it before saving.

Available sounds

  • 🔔 Ding — clean single bell tone, good for notifications
  • 💬 Pop — quick soft pop, subtle and friendly
  • 🎵 Chime — three-note ascending chime, attention-grabbing
  • 📳 Notify — classic two-tone notification
  • ✅ Success — upward three-note jingle, great for offers
💡 Pro tip: Sounds are generated using the browser's built-in Web Audio API — no audio files are downloaded, zero impact on your page load speed. Sound plays only after the visitor has interacted with the page (browser requirement), so trigger_delay of 3+ seconds is recommended.

Paid plans can also hide ToastUp branding per toast. Free plan toasts always show branding.

14. Toast Order

When you have multiple active toasts on a site, you can control the order they appear and how they stack on screen.

Reordering in the dashboard

  • On the My Toasts page, each row has ▲ ▼ arrow buttons in the Actions column.
  • Click ▲ to move a toast up (lower display number = shown first / stacked lowest).
  • The list instantly re-sorts to reflect the new order.
  • Order is preserved when filtering by site — arrows only swap toasts within the current filtered view.

Stacking on your website

If multiple toasts are active on the same page and share the same corner position, they stack vertically instead of overlapping:

  • Each new toast appears above the previous one with a 12px gap.
  • Toasts at different positions (e.g. bottom-left vs top-right) are independent and don't affect each other.
💡 Pro tip: To avoid a cluttered screen, keep the number of simultaneously active toasts to 2–3 maximum. Use Frequency and Trigger Delay settings to spread them out over time.

15. Billing & Plans

You can manage your subscription from the Billing page.

  • FREE Plan: Great for testing. Includes 5 toasts, 1 domain, and 7-day analytics. ToastUp branding is always visible.
  • Basic Plan: Unlimited toasts, full analytics, ability to hide branding, third-party tracking, lead capture, Zapier integration, sound effects, and custom tracking events.
  • PRO Plan: Everything in Basic, plus support for up to 5 domains and priority support.

You can upgrade, downgrade, or cancel your plan at any time through our secure Stripe billing portal. Paid plans can be billed monthly or annually.

16. Referral Program

Invite friends to ToastUp and earn free months of Basic or PRO — no payment required.

How it works

  1. Go to Dashboard → Referrals to find your unique referral link.
  2. Share the link with friends, teammates, or your audience.
  3. When someone registers via your link and buys a paid plan (Basic or PRO), you automatically receive +1 referral credit.
  4. Accumulate credits and redeem them for free months once your active plan expires.
💡 Pro tip: Credits are only awarded when a referred user completes a paid purchase — free plan sign-ups don't count.

Reward tiers

  • 2 credits → 1 month of Basic free
  • 4 credits → 2 months of Basic free
  • 4 credits → 1 month of PRO free
  • 6 credits → 2 months of PRO free

Credits never expire and accumulate indefinitely — invite 6 friends and unlock 2 months of PRO at once.

Redeeming credits

  1. Credits can only be redeemed after your current paid plan expires (or if you're on the Free plan).
  2. In the Referrals dashboard, choose the plan (Basic or PRO) and the number of months.
  3. Click Activate free — your plan is instantly upgraded with no Stripe checkout required.
💡 Pro tip: You can chain redemptions: when your first free month expires, redeem more credits for another month.

Rules

  • You can't use your own referral link to earn credits.
  • Each referred user counts once, regardless of how many plans they purchase.
  • Referral credits don't have cash value and can't be transferred.
Need more help? 🛟 — If you can't find the answer here, feel free to reach out to us at hello@toastup.co. We're always happy to help!