Create your pop-up or in-app messaging campaign

Pop-up and in-app messaging campaigns let you display targeted messages directly on your website or mobile app to engage visitors at the right moment. Website messages are called pop-ups, and mobile app messages (iOS and Android) are called in-app messaging. Both types share the exact same setup, design, and configuration steps.

Use pop-ups and in-app messaging to promote offers, highlight announcements, or drive action without sending a separate campaign. Unlike push campaigns, visitors do not need to opt in to receive pop-ups or in-app messages, they reach everyone.

Good to know

  • Pop-ups and in-app messaging use the same setup as push notifications. If you have already set up push notifications, you don't need to set up pop-ups and in-app messaging again. To learn more, check our dedicated article Set up web push notifications, pop-ups, and in-app messaging.
  • Pop-up and in-app messaging campaigns are different from pop-up sign-up forms. Sign-up forms are used to collect new contacts and grow your lists, while promotional pop-ups and in-app messages are campaign messages sent to visitors of your website or app. To learn more, check our dedicated article Create a pop-up sign-up form in Brevo.

🔎 Step 1: Create your pop-up or in-app messaging campaign

To create your pop-up or in-app messaging campaign:

  1. Go to Marketing > Campaigns.
  2. Click Create campaign.
  3. Choose Pop-up.
  4. Name your campaign to easily find it in the list of your pop-up and in-app messaging campaigns. This name will only be visible to you.
  5. (Optional) Select one or several tags. To learn more, check our dedicated article Create and use tags for your campaigns and automations.
  6. (Optional) Select a folder in which you want to save your campaign for organization purposes. To learn more about campaign folders, check our dedicated article Organize your campaigns and templates with folders.
    popups_create-campaign_en-us.png
  7. Click Create pop-up.

🎨 Step 2: Design your pop-up or in-app message

You can now start designing what your pop-up or in-app message will look on both desktop and mobile devices.

You can drag and drop blocks and configure other elements to design your pop-up on in-app messaging campaign, or use the HTML/CSS editor.

Design your pop-up or in-app messaging campaign

Drag & drop editorHTML/CSS
popups_drag-drop-editor_en-us.png

To start designing your pop-up or in-app messaging campaign with the drag & drop editor:

  1. Click Create design > Drag & drop editor.
  2. Select Start from scratch or choose one of the available templates.

  3. Use the editor to add content to your pop-up or in-app message.

    Expand the following accordions to learn more about the blocks available to design your pop-up or in-app message.

    ✏️ Text
    popups_text-block_en-us.png

    The Text block allows you to include descriptive text in your pop-up or in-app message. You can add an engaging introduction and provide more context regarding the pop-up's or in-app message's purpose. When you click on a Text block, a top bar appears. This bar allows you to modify the text's formatting, such as style, font, size, color, and alignment, and insert links.

    🖼️ Image
    popups_image-block_en-us.png
    		 The Image block allows you to add an engaging picture. You can select or generate an image. You can add a target page or screen and customize the style of the image.
    🖱️ Button
    popups_button-block_en-us.png
    		 The Button block allows you to add a call-to-action by adding a URL, which allows visitors to be redirected when they click it. You can customize the style of your call-to-action button: change the text, color, font, border radius, and padding.

  4. You can customize what your pop-up or in-app message will look like. Click each element in the preview to edit it. Customize the design of your pop-up or in-app message using the settings panel. Expand the following accordions to learn more about what elements of the pop-up or in-app message you can customize. 

    🔳 Background overlay
    forms_bg-overlay_EN-US.png Click the background overlay in the preview to customize it. You can choose a color and opacity for the background to make your pop-up or in-app message window stand out.
    💬 Pop-up window (layout, image, style)
    popups_popup-window_en-us.png

    Click the Pop-up window in the preview to customize its design:

    • Position & size: Set the position and size of the pop-up or in-app message.
    • Layout: Adjust the spacing, margins, distance from the page border, and orientation.
    • Image: Toggle Show image to display an image in your pop-up or in-app message. Click Select image to upload one, or Generate to create one with AI.
    • Style: Customize the background color, borders, rounded corners, and shadow.
    • Animation: Choose how the pop-up or in-app message appears and disappears.
    • Automatic closure: Activate automatic closing of the pop-up or in-app message.
    💡 Good to know
    The Image section lets you add one image on the pop-up or in-app message only. To add more images or place them elsewhere, use the Image block instead. Note that this image is not clickable, unlike the Image block.
    ✖️ Close button
    forms_close-button_EN-US.png Click the close button to edit the X-shaped icon color, the fill color, borders, and shadow.

Mobile view

popups_mobile-view_en-us.png
 You can preview how your pop-up or in-app message will look on a mobile device by toggling the view from desktop to mobile at the top of the editor. Note that you can't edit the mobile view.

Once you're satisfied with how your pop-up or in-app message looks, click Save and exit. 

Edit and reset your design

From your pop-up or in-app messaging campaign overview, you can change the design before activating your campaign:

  1. Click Edit next to Design to make further changes.

  2. Click the three-dot icon next to Edit > Reset design to clear your current design and start over. 
    popups_edit-reset-design_en-us.png

    ❗️ Important
    Resetting the design is permanent and cannot be undone.

⚙️ Step 3: Configure your pop-up or in-app messaging campaign

Expand the following accordions to see the options available to configure your pop-up or in-app message.

Where the pop-up should appear
  1. Select which platform you want your pop-up or in-app message to appear on. To configure platforms, check our dedicated article Set up push notifications, pop-ups, and in-app messaging.
  2. If you have configured a website, choose the pages where visitors will see the pop-up on your website:
    1. Show on all pages
      Your pop-up can appear on every page of your website.
    2. Show on these pages only
      Enter the URL of the pages you want the pop-up to appear. You can add up to 20 URLs.
    3. Show on all pages except these ones
      Enter the URL of the pages you don't want the pop-up to appear. You can add up to 20 URLs.
  3. Click Save.
When the pop-up appears
  1. Choose when visitors will see the pop-up or in-app message.
    1. When the page/screen loads
      Select the delay in seconds.
    2. When the user is about to leave the page
      The pop-up or in-app message appears when the user is about to leave the page: when trying to close the tab of the page, entering a new URL or moving their mouse away from the page.
    3. When an event occurs
      The pop-up or in-app message appears when a custom event you have defined is triggered.
  2. Select how many visits before the pop-up or in-app message appears to a visitor.
  3. Select how many times a visitor can see the same pop-up or in-app message.
  4. (Optional) If a visitor can see the same pop-up or in-app message at least twice, select the delay before a visitor sees this pop-up or in-app message again.
  5. Click Save.

🚀 Step 4: Activate your pop-up or in-app message

You can now activate your pop-up or in-app message:

  1. Review your pop-up or in-app message settings.
  2. Click Activate now or later.
    popups_activate_en-us.png
  3. In the Activate pop-up dropdown, select:
    • Now to make your pop-up or in-app message live immediately, or
    • At a specific time to select an activation day and time.
  4. In the Deactivate pop-up dropdown, select:
    • Never to keep your pop-up or in-app message active, or
    • At a specific time to select a deactivation day and time.
  5. Click Activate now or Schedule pop-up.

Once your pop-up or in-app message is live, you can track its performance from the Campaigns page: views, clicks, and conversion rate.

popups_campaign-stats_en-us.png

⏭️ What's next?

🤔 Have a question?

If you have a question, feel free to contact our support team by creating a ticket from your account. If you don't have an account yet, you can contact us here.

If you’re looking for help with a project using Brevo, we can match you with the right certified Brevo Agency partner.

💬 Was this article helpful?

1 out of 1 found this helpful