Skip to main content

Set up Web Push

In this article, we'll explain how to set up Web Push. 
Web Push setups allow you to link Sendinblue to your website. This way, you'll be able to manage your Web Push campaigns from Sendinblue to your website. 

The goal of this step is also to enable the browser opt-in for clients. If clients allow the opt-in, they will receive your Web Push Notifications when they visit your website. 

mceclip1.png

Step 1: Website URL Setup

  1. Go to Campaigns > Web Push > Setup web push.
    mceclip2.png
  2. Enter your website name and URL link. 
    mceclip1.png

    ❗️ Important
    The link you add must be your website homepage's link, not any other page. 
    Your website URL should follow one of these formats:
    https://site.com/ ; https://www.site.com/ ; https://subdomain.site.com/
  3. Change your Company's logo if you wish to.
    Your company logo will appear on your Web Push Notifications. 
  4. Click Save the info

Step 2: Tracker setup

❗️ Important
If you use Shopify or WordPress for your website, steps 2 and 3 are not necessary. All you have to do is to install the Sendinblue Shopify or WordPress plugins. 
For WordPress users, enable SIB tracker after installing the plugin for Web Push setup completion.mceclip0.pngTo learn more about Shopify and WordPress plugins, check our dedicated articles Shopify plugin - Installation and setup and WordPress plugin - Installation and setup. 

This step consists of installing a tracker, the tracker links your website to Sendinblue. 

💡 Good to know
This step may be skipped if you've already installed our Sendinblue tracker to use Marketing automation previously.
To learn more about our Sendinblue tracker, check our dedicated article What is Sendinblue Tracker and how can I install it? 
  1. Choose an installation option.
    There are three options to set up your website:
    • JS Trackers 
      mceclip0.png

      ➡️ This option consists of copying and pasting a code to your website. 
    • Plugins
      mceclip1.png

      ➡️ This option allows you to link Sendinblue to your website through an app (Shopify, WordPress, WooCommerce, Prestashop etc.).  
    • Google Tag Manager
      mceclip2.png
      ➡️ This option uses Google Tag Manager to set up Web Push. The advantage of this option is that you don't have to change the coding of your website. 
      💡 Good to know
      For each setup option, you get the opportunity to enable the use of cookies. Enabling cookies helps to track individual contacts. Click the activation button to allow it. 
      image.png
  2. Follow the instructions below for each chosen option to do the setup. 
  3. Once the setup is done, click Verify to check if the installation is successfully executed. 
    mceclip2.png

Step 3: File's upload 

All the previews setups and choices you've made are grouped in a file, all you need to do is to download and manually upload this file to your website. 

  1. Download the setup file. 
    mceclip0.png
  2.  Upload the setup file to your website.

    To upload it to a Woocommerce Website:

    1. Go to file manager in Cpanel.
      mceclip0.png
    2. Create a Sendinblue folder under public_html folder which is publicly accessible.
    3. Upload service-worker.js file (the set up file) in the Sendinblue folder.
      mceclip5.png

    To upload it to a Prestashop or Magento Website:

    1. Go to file manager in Cpanel. 
      mceclip0.png
    2. Create a Sendinblue folder under prestashop root directory or magento root directory which is publicly accessible.
    3. Upload service-worker.js file in the Sendinblue folder.
      mceclip4.png
  3. After the upload (on any website), go to the link yoursite.com/sendinblue/service-worker.js replacing yoursite.com with your actual domain.
    ➡️  For example
    If your domain is theexample.com go to the link theexample.com/sendinblue/service-worker.js.
    ✅ If the setup file is installed correctly, you will see this message: 
    mceclip7.png
    ❌ If you see a 404 page or other page, check that the setup file was correctly uploaded to the Sendinblue directory structure. 
  4. Click Activate
    mceclip9.png

If your setup is successfully executed, you automatically get access to the next step.mceclip1.png

You can now create Web Push Notifications, to learn more, check our dedicated article Create a Web Push campaign.

💡 Good to know
Once you've set up Web Push, you can't change your Website URL. However, you can access the Web push notifications Settings page to edit your opt-in, website's name, company logo, code tracking, and more. 
To learn more about Web Push Settings, check our dedicated article Actions of Web Push Settings

⏩ 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.