Recherche

Create your pop-up campaign

This feature is still in beta and is part of an early release to some of our users.

Pop-up campaigns, also known as in-app messaging, let you display targeted messages directly on your website or mobile app to engage visitors at the right moment. Use them 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, they can reach everyone.

Good to know

  • Pop-ups use the same setup as push notifications. If you have already set up push notifications, you don't need to set up pop-ups again. To learn more, check our dedicated article Set up web push notifications and pop-ups.
  • Pop-up 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 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 campaign

To create your pop-up campaign:

  1. Go to Marketing > Campaigns.
  2. Click Create campaign.
  3. Choose Pop-up.
  4. Name your pop-up campaign to easily find it in the list of your pop-up 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 pop-up 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

You can now start designing what your pop-up will look like on your website, on both desktop and mobile devices.

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

Design your pop-up campaign

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

To start designing your pop-up 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.

    Expand the following accordions to learn more about the blocks available to design your pop-up

    ✏️ Text
    popups_text-block_en-us.png

    The Text block allows you to include descriptive text in your pop-up. You can add an engaging introduction and provide more context regarding the pop-up'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 will look like on your website. Click each element in the preview to edit it. Customize the design of your pop-up using the settings panel. Expand the following accordions to learn more about what elements of the pop-up 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 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.
    • Layout: Adjust the spacing, margins, distance from the page border, and orientation.
    • Image: Toggle Show image to display an image in your pop-up. 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 appears and disappears.
    • Automatic closure: Activate automatic closing of the pop-up.
    💡 Good to know
    The Image section lets you add one image on the pop-up 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 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 looks, click Save and exit.

⚙️ Step 3: Configure your pop-up campaign

Expand the following accordions to see the options available to configure your pop-up form.

Where the pop-up should appear
  1. Select which platform you want your pop-up to appear on. To configure websites, check our dedicated section in this article.
  2. Choose the pages where visitors will see the pop-up on your website:
    1. Show on all pages
      Your pop-up form 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 on your website.
    1. When the page/screen loads
      Select the delay in seconds.
    2. When the user is about to leave the page
      The pop-up form 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 appears when a custom event you have defined is triggered.
  2. Select how many visits before the pop-up appears to a visitor.
  3. Select how many times a visitor can see the same pop-up form.
  4. (Optional) If a visitor can see the same pop-up form at least twice, select the delay before a visitor sees this pop-up form again.
  5. Click Save.

🚀 Step 4: Activate your pop-up

You can now activate your pop-up:

  1. Review your pop-up 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 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 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 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?

🤔 Vous avez des questions ?

Pour toute question, n’hésitez pas à contacter notre service client en créant un ticket à partir de votre compte. Si vous n’avez pas encore de compte, vous pouvez nous contacter ici.

Si vous avez besoin d'aide pour un projet impliquant Brevo, nous pouvons vous mettre en relation avec une agence partenaire Brevo.

💬 Cet article vous a-t-il été utile ?

Utilisateurs qui ont trouvé cela utile : 0 sur 0