Skip to main content

Cordova/Capacitor SDK

To integrate the Atomic SDK into your Cordova or Capacitor app, you'll use the Atomic Web SDK. Therefore, for full documentation for the Cordova/Capacitor SDK, please see the Web SDK documentation page.

Boilerplate App​

For an example of integrating the Atomic SDK in a Cordova application, see our boilerplate app on GitHub.

Installation​

To use the Web SDK with your Cordova or Capacitor app:

  1. Download the Atomic SDK from our CDN, and bundle it with your application. There are two files you need to download:
  • https://downloads.atomic.io/web-sdk/release/24.3.0/iframe-manager.js
  • https://downloads.atomic.io/web-sdk/release/24.3.0/sdk.js
Download specific version

Change the version number (e.g. 24.3.1) to download a specific version.

  1. (Cordova only): Modify the Content-Security-Policy meta tag in your Cordova app to allow the following URLs.

  2. Add <allow-navigation href="about:blank" /> and <allow-navigation href="blob:" /> to your config.xml file.

  3. Include the sdk.js and iframe-manager.js files as two standalone scripts, added to your app as script tags. The iframe-manager.js script tag must also have the ID atomic-frame-manager, and must appear before the sdk.js tag.

caution

We require you to download the scripts and include them locally, importing the scripts directly from the Atomic CDN will not work for a Cordova integration of the SDK.

  1. Enable the cordova feature via the stream container configuration object:
<html>
  ...
  <body>
    <!-- Include the following scripts on your page (must be in this order) -->
    <script src="js/iframe-manager.js" id="atomic-frame-manager"></script>
    <script src="js/sdk.js"></script>

    <!-- Initialize the SDK (Cordova example using the deviceready event) -->
    <script>
      document.addEventListener('deviceready', function() {
          AtomicSDK.initialise('<apiHostUrl>', '<apiKey>', '<environmentId>');

          const launcherInstance = AtomicSDK.launch({
            streamContainerId: '<streamContainerId>',
            features: {
              cordova: {
                enabled: true,
              },
            },
          });
      }.bind(this), false);
    </script>
  </body>
</html>

Push Notifications​

Full documentation on integrating support for push notifications on iOS and Android can be found in the Web SDK documentation.

Last updated on