Skip to main content
Use these copy/paste HTML templates to build custom OneSignal in-app messages faster. Our In-App Message HTML Editor lets you fully control your in-app message layout and behavior using HTML, CSS, and JavaScript. The editor does not include built-in templates, but this page provides ready-to-use examples you can paste into the editor and customize.
These templates run inside an in-app message webview. To close messages, open URLs, tag users, and capture clicks, use the In-App Message JS API.

​
Prerequisites

Before you start, we recommend you review:
Do not put secrets (API keys, tokens) in template code. Treat all in-app message input as untrusted and validate it in your app or backend.

​
How to use the templates

  1. In OneSignal, go to Messages > In-App > New In-App.
  2. Select the HTML editor.
  3. Find a template below.
  4. Copy the full HTML from the code block and paste it into the editor.
  5. Update the placeholders (URLs, endpoints, dates, and copy).
  6. Test on a real device, then publish.

​
Available templates

email-form

Collect Email Form

Ask for the user’s email and send it to your app via click name.
 sms-form

Collect Phone Numbers Form

Ask for and get consent to send SMS. Includes phone number in E.164 format and send it to your app via click name.
 checklist-survey

Checklist Survey

Multi-select survey you can send to your backend or convert to tags.
 count_down

Countdown

Countdown timer for time-sensitive promotions.
 promo-wheel

Promo Wheel

Spin-to-win promo experience (customize promo handling).
 quiz_modal

Quiz Modal

Quiz experience that can tag users with their score.
 ranking-survey

Ranking Survey

1–5 rating survey (send to your endpoint or tag user).
 ui-ui

Audio/Video Player

Simple audio preview UI for a direct MP3 file.
 vertical-swiping

Vertical Swiping

Multi-slide vertical swipe onboarding or feature tour.

​
Email form

Gather Email Subscriptions through an in-app message.
  • The user enters an email and checks a consent box.
  • On submit, the template calls OneSignalIamApi.addClickName(e, email).
  • Your mobile app reads the click name in an In-App Message Click Listener, then calls OneSignal.User.addEmail(email).
This template passes the email through the click name (actionId). Treat it as user-provided input and validate it before saving.
Required mobile setup:
  1. Keep the addClickName call in your HTML submit handler.
  2. Read the input with our SDK’s In-app Message Click Listener
  3. When the click name looks like an email, call the addEmail method within the in-app message click listener.
Example using the in-app message click listener and addEmail method: 
// Example In-App Message Click Handler to capture email and phone from HTML in-app messages
class InAppMessageClickHandler: NSObject, OSInAppMessageClickListener {
    func onClick(event: OSInAppMessageClickEvent) {
        // Get the click name (action ID) from the event
        let clickName = event.result.actionId
        print("In-App Message clicked with actionId: \(clickName ?? "nil")")
        
        guard let value = clickName else { return }
        
        // Check if the click name looks like an email address
        if value.contains("@") && value.contains(".") {
            OneSignal.User.addEmail(value)
            print("Email added to OneSignal: \(value)")
        }
        // Check if the click name looks like a phone number in E.164 format (+1XXXXXXXXXX)
        else if value.hasPrefix("+") && value.count >= 11 {
            OneSignal.User.addSms(value)
            print("SMS added to OneSignal: \(value)")
        }
    }
}

​
SMS form

Gather SMS leads through an in-app message. This template formats and submits a US phone number as E.164.
  • The user enters a 10-digit number and checks a consent box.
  • The template converts the number to +1XXXXXXXXXX.
  • On submit, it calls OneSignalIamApi.addClickName(e, e164Phone).
  • Your mobile app reads the click name and calls OneSignal.User.addSms(value).
This template hardcodes +1. If you support multiple countries, add a country selector and update the E.164 formatting/validation.
Required mobile setup:
  1. Keep the addClickName call in your HTML submit handler.
  2. Read the input with our SDK’s In-app Message Click Listener
  3. When the click name is an E.164 number, call the addSms method within the in-app message click listener.
Example using the in-app message click listener and addSms method: 
// In-App Message Click Handler to capture email and phone from HTML in-app messages
class InAppMessageClickHandler: NSObject, OSInAppMessageClickListener {
    func onClick(event: OSInAppMessageClickEvent) {
        // Get the click name (action ID) from the event
        let clickName = event.result.actionId
        print("In-App Message clicked with actionId: \(clickName ?? "nil")")
        
        guard let value = clickName else { return }
        
        // Check if the click name looks like an email address
        if value.contains("@") && value.contains(".") {
            OneSignal.User.addEmail(value)
            print("Email added to OneSignal: \(value)")
        }
        // Check if the click name looks like a phone number in E.164 format (+1XXXXXXXXXX)
        else if value.hasPrefix("+") && value.count >= 11 {
            OneSignal.User.addSms(value)
            print("SMS added to OneSignal: \(value)")
        }
    }
}

​
Checklist survey

Multi-select survey that posts results to your backend.
  • Set your endpoint in handleSurveyAnswer().
  • Update checkbox name values and labels to match your question.
If you leave var url = "", the request will fail. Set a real endpoint or replace fetch() with tagging (example below).
Optional: tag users instead of calling your backend Replace the handleSurveyAnswer(answers) call in the submit handler with: 
OneSignalIamApi.tagUser(e, {
  allergies: JSON.stringify(answers)
});

​
Countdown

Create urgency with a countdown timer for limited-time offers and promotions. Customize the end date and redirect URL to match your campaign.
  • Update endtime to a future date/time.
  • Update openUrl destination URL.
The sample endtime in this template is in the past (Mar 25, 2025). If you don’t update it, users will immediately hit the “ended” logic.

​
Promo wheel

Spin-to-win promotion with a random outcome.
  • Replace hardcoded promo codes with server-generated or validated codes.
  • Add your “Shop Now” URL or action.
Client-side randomness and hardcoded codes are easy to abuse. If a promo has value, generate/validate it server-side.

​
Quiz modal

Interactive quiz that tracks score.
  • Update the questions array with real content.
  • Decide when to tag users:
    • current behavior tags on close
    • you can tag immediately when the quiz ends

​
Ranking survey

1–5 rating survey.
  • Set your url in handleSurveyAnswer().
  • Update question text and labels.

​
Audio/video player

Audio preview UI. For video details, see the HTML Design guide for embedding videos.
  • Replace the <audio> src with a direct MP3 URL.
  • Update the CTA openUrl destination URL.
Do not use a streaming page URL in <audio>. The <audio> element requires a direct audio file URL (like .mp3).

​
Vertical swiping

Multi-slide vertical onboarding or feature tour. Why this template works well on mobile:
  • Uses a hidden OneSignal-labeled close button for reliable dismissal.
  • Places the visible close button in the safe area and uses a large tap target.
  • Disables swipe when interacting with buttons/inputs.