To integrate MagicPush on your website follow the below steps.

Step 1. download service worker and manifest files

In order to make push work we need the service worker file and manifest.json file on a reachable location of the webserver.

Download service worker here.

Download manifest.json here.

Step 2. add manifest to the header

Add the following line of code to add the manifest.json file to the header.

HTML

<link rel="manifest" href="/manifest.json">

JS Integration

Copy & paste the script tags into your HTML body as shown inside the code example. must be replace with your app ID which can be found here in the dashboard. The second argument must be the location of the service worker you downloaded in step 1.

JavaScript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>
<body>
		<script src="<https://getmagicpush.com/js/main.min.js>"></script>
		
		<script type="application/javascript">
		new MagicPush("<YOUR APP ID HERE>", "/js/MagicPushSW.js");
		</script>
</body>
</html>

NPM package

Install the following package using npm:

npm i magicpush-npm

Then integrate MagicPush using the following snippet

JavaScript

import MagicPush from "magicpush-npm";
MagicPush.init({
    appId: "APP ID",
    swUrl: "/js/MagicPushSW.js",
    showButton: true,
    autoShowModal: true
})

MagicPush.addListener((event) => {
    console.log(event)
});

MagicPush.toggleModal();

Vue.js integration