Standard Web Integration
web push notifications
Estimated integration time: 10 minutes.
If you use npm pulse here.
If you use Wordpress, visit our specific guide here.
If you want to integrate through Google Tag Manager, then use this guide.
To integrate our web push notifications tool on your page you need:
-
an indigitall account
-
paste the following code in the main page of your website, just before the end of the tag
</body>:
Important: the appKey value is unique and personal. You can get it by accessing your account > settings > value of App Key
<script
src="/en/sdk.min.js"
onload="indigitall.init({
appKey: 'yourAppKey',
workerPath: '/worker.min.js',
requestLocation: true
})"
async>
</script>Integrate in Safari (Optional)
In order to send notifications through Safari, it is necessary to "create" a specific button for this browser.
Here's an example code that you could use:
(Remember that the appKey must be found in your indigitall console by clicking on Settings > Projects > App Key)
<script>
var indigitallParams = {
appKey: "yourAppKey",
workerPath: '/indigitall/worker.min.js'
};
function onIndigitallLoaded(){
indigitall.init(indigitallParams);
if(indigitall.isSafariPushNotificationSupported() && !localStorage.getItem('indigitall.repository.PUSH_TOKEN')){
var button = document.createElement("span");
button.innerHTML = `<div id="indigitall-button" onclick="indigitall.launchNotificationPermissionForSafari();document.getElementById('indigitall-button').remove();" style="position: fixed; bottom: 15px; left: 15px; z-index: 999; transition: .2s ease;">
<a style="display: block; border-radius: 50%; border: 1px solid #74d227; width: 50px; height: 50px; color: #fff; background: linear-gradient(to bottom,#89da3e 1%,#6dbf37 100%); text-align: center; vertical-align: middle; line-height: 60px; cursor: pointer; box-shadow: 0 0 3px #000; transition: .35s ease; transition-property: all; font-size: 20px; text-shadow: 0 0 2px rgba(0,0,0,.5); position: relative;">
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="#f5f5f5" d="M21,19V20H3V19L5,17V11C5,7.9 7.03,5.17 10,4.29C10,4.19 10,4.1 10,4A2,2 0 0,1 12,2A2,2 0 0,1 14,4C14,4.1 14,4.19 14,4.29C16.97,5.17 19,7.9 19,11V17L21,19M14,21A2,2 0 0,1 12,23A2,2 0 0,1 10,21" />
</svg>
</a>
</div>`;
document.getElementsByTagName("body")[0].appendChild(button);
}
}
</script>
<script src="/en/indigitall/sdk.min.js" onload="onIndigitallLoaded()"></script>
How to upload files to your server or access them?
You can do it through FTP or from your server's control panel (cPanel, directAdmin, etc) among other ways. In less than 10 minutes, you should have it.
You can ask your hosting provider or your trusted programmer for help by sending these instructions.
Check the integration
If everything went well, when you access your website again, you should see a message in your browser to allow notifications. Example:
Click Allow .
Then open the developer console (hit F12) and go to Console, you should see something like this:
[IND] Client: Method: PUT
URL: https://device-api.indigitall.com/v1/device?appKey=(yourAppKey)&deviceId=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
Request Body: {
[...]
"pushToken": "https://fcm.googleapis.com/fcm/send/xxxx",s
"browserPublicKey": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
"browserPrivateKey": "xxxxxxxxxxxx"
}
Response Code: 200
Response Message: OK
Response Body: {
"deviceId": "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
"enabled": true,
"platform": "webpush"
}
Note that Response Code has the value 200 .
If everything is correct, congratulations, you just need to create and send your first campaign!
Campaigns are managed from the control panel of your indigitall account. Access your account.
Resources
User guide: create campaigns, edit and more.
Wordpress Plugin integration guide