Skip to content

sdk-installation.md

Latest commit

 

History

History
100 lines (73 loc) · 2.97 KB

sdk-installation.md

File metadata and controls

100 lines (73 loc) · 2.97 KB

JavaScript SDK Installation

Finally, to make things work you have to include our JavaScript SDK on your website.

{.toc}

{#include-manifest-file}

Include manifest file

Include manifest.json at the top of your <head> tag.

Please Note

  • An error occurs if manifest.json is included in <body>.
  • Your <link rel="manifest" href="/manifest.json"> must appear before any other <link rel="manifest" ...> in <head>, otherwise it will not be found.

{#include-sdk-file}

Include JavaScript SDK file

Include <script src="https://cdn.notimatica.io/sdks/latest/notimatica-sdk.js" async></script> in your <head> tag.

Dont' worry our JavaScript SDK is fully asynchronous and event-based so it won't affect page loading.

{#initialize-sdk}

Initialize SDK

Place a small peace of JavaScript code right below SDK call.

{.line-numbers}

var Notimatica = Notimatica || [];
Notimatica.push(['init', {
  project: 'PROJECT_ID',
  subdomain: 'SUBDOMAIN',
  safariWebId: 'web.com.mydomain'
}]);

You can find your Project ID and Subdomain in Dashboard → Projects (take me there). In case I've added Apple Safari support you need to add safariWebId parameter with your Apple Web Push ID.

Now let's see a real life working example:

{.line-numbers}

<head>
<link rel="manifest" href="/manifest.json">
<script src="https://cdn.notimatica.io/sdks/latest/notimatica-sdk.js" async></script>
<script>
  var Notimatica = Notimatica || [];
  Notimatica.push(['init', {
    project: '08823592-135f-5576-9a91-f3a0675aa1d1',
    subdomain: 'testdomain',
    debug: true,
    plugins: {
      button: {
        enable: true,
        autorun: true,
        position: 'bottom-right'
      }
    }
  }]);
</script>
</head>

In this example we:

  1. Include manifest.json
  2. Include JavaScript SDK file
  3. Initialize SDK
    1. Set Project ID
    2. Set Subdomain
    3. Enable debug-mode to see error messages in Developer Tools Console.
    4. Enable Floating button plugin in the bottom right corner. For additional ease of web push opt-in process we've enabled autorun option.

Want More?

Checkout more Examples & Tutorials as well as comprehensive documentation on JavaScript SDK with complete list of options.

Testing In Sandbox

When testing your project in sandbox (https://localhost), it may be helpful to run browser with additional flags to bypass a warning of invalid certificate. Here are tips:

  • Chrome: Run Chrome with --ignore-certificate-errors flag.
  • Firefox and Safari: Both have built-in mechanisms to create exceptions for specific certificates.