Launch Brevz Application

HTTPS Integration

A guide to integrate Brevz into a website (HTTPS)


This guide will help you setting up Brevz with your HTTPS website. Your website must begin with https:// to use this guide.

If you have some trouble with this guide, you can come to our slack to ask questions.

This tutorial walks you through installing and configuring Brevz on your website. To do this tutorial you'll need a Brevz account, do not worry, Brevz got a free tier. If you don't have an account yet, create one here.

Create your project

Follow this guide to create a new project.

Choose your Brevz' features

As you know, Brevz has two main features:

Integrate it

Service Worker

The service worker is a component which will run in a background mode and display notifications when they need to be displayed.

I do not have an existing service worker

If you do not have any service worker, you must download sw.js and upload it into your root directory. It must be served to be accessible with: https://yourdomainname.ltd/sw.js.

I have an existing service worker

If you have an existing service worker, just add this line to the end of your service worker.

importScripts("https://sw.static.brevz.io/sw.min.js");

Manifest

The manifest.json describe metadata about the website, if you are looking for information about the manifest.json check out the MDN Web Docs about Manifest.json.

I do not have an existing manifest

You just have to download it from the integration tab and upload it into your root directory. It must be served to be accessible with https://yourdomainname.ltd/manifest.json.

I have an existing manifest

You can merge the manifest file that Brevz provides here with your own, just make sure you have the gcm_sender_id to ensure that the notifications work with Chrome 51 and earlier versions as well as Opera for Android and the Samsung browser.

Bundle

The bundle is a tiny javascript script that you should include to your website to allow Brevz to work properly. Insert this code, preferably just before the head tag ends.

The brevzConfig variable will describe you own configuration. A sample configuration will be provided in the integration tab and you can also explore advanced configuration

index.html
<script>
  var brevzConfig = {
    projectId: "<Project ID, you can found this code inside the Integration signet from the Brevz's app>", // Do not change it.
  };
</script>
<script type="text/javascript" src="https://bundle.static.brevz.io/bundle.min.js" defer="defer"></script>