Web SDK

Getting Started

This Tutorial aims to teach the user how to integrate his Website with Appgain.io cloud using appgain.io Web SDK and how to use the appgain.io products.

Required For Setup

Appgain.io Account if you do not already have one
Your Appgain.io Project ID, available in Project Settings
Download Appgain Web SDK , firebase-messaging-sw.js and firebase.js .

Installation on HTTPS Websites

Add the three downloaded files to the root of the Website.
Enable HTTPS on your Website: this is a must for AppGain web push to work
Add the below script in the head section at all of your website pages

<head>
    <script src="https://www.gstatic.com/firebasejs/3.7.3/firebase.js"></script>
    <script type="text/javascript" src="https://cdn.appgain.io/webSDK/appgainsdk.min.js"></script>
</head>

Installation on Shopify Stores

Go to https://{yourstore}.myshopify.com/admin/themes
At Live Theme Section , Go to Action Button and from its menu select Edit Code
Open file layout/theme.liquid
In the header section insert the below code , note to replace yourProjectId,yourAPIKey with the the values from your Appgain.io project and YourWebsiteName with your Store Name

 <script src="https://cdn.appgain.io/docs/appgain/appgainSdk/websdk/jquery.min.js"></script>
<script src="https://cdn.appgain.io/docs/appgain/appgainSdk/websdk/jquery-ui.min.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.7.3/firebase.js"></script>
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script type="text/javascript" src="https://cdn.appgain.io/webSDK/appgainsdk.min.js"></script>


  <script>
    let appgainConfig = {
      projectId: "{yourProjectId}",
      apiKey: "{yourAPIKey}",
      quickInstall: true,
      websiteName: "{YoutWebsiteName}", //optional in case of null, the subdomain will be used in the Request Notification POP-UP
    };

    Appgain.init(appgainConfig)
    .then((res) => {
      console.log(res);
    })
    .catch((err) => {
      console.log(err);
    });


  </script>

Installation on HTTPS Web-sites

Add the three downloaded files to the root of the Website.
Enable HTTPS on your Website: this is a must for AppGain web push to work
Add the below script in the head section at all of your website pages

Using Sweet Modal for POP-UPs

<head>
  <script src="https://cdn.appgain.io/docs/appgain/appgainSdk/websdk/jquery.min.js"></script>
<script src="https://cdn.appgain.io/docs/appgain/appgainSdk/websdk/jquery-ui.min.js"></script>

    <script src="https://www.gstatic.com/firebasejs/3.7.3/firebase.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdn.appgain.io/docs/appgain/appgainSdk/websdk/jquery.sweet-modal.min.css"/>
    <script src="https://cdn.appgain.io/docs/appgain/appgainSdk/websdk/jquery.sweet-modal.min.js"></script>
    <script type="text/javascript" src="/appgainsdk.js"></script>
</head>

Using Sweet Alert for POP-UPs

<head>
   <script src="https://cdn.appgain.io/docs/appgain/appgainSdk/websdk/jquery.min.js"></script>
<script src="https://cdn.appgain.io/docs/appgain/appgainSdk/websdk/jquery-ui.min.js"></script>
    <script src="https://www.gstatic.com/firebasejs/3.7.3/firebase.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script type="text/javascript" src="/appgainsdk.js"></script>
</head>

Initializing (HTTPS)

-Initializing Appgain SDK using Appgain.init requires an appgainConfig object that includes

projectId: from Appgain Dashboard -> Project Settings -> Basic Settings ->API and SDK Keys
apiKey: from Appgain Dashboard -> Project Settings -> Basic Settings ->API and SDK Keys
userId [optional]: If the userId is not passed into the

appgainConfig object, the SDK will search for the userId in the localStorage or in the URL query, if no userId has been found the SDK generate a custom userId.

Place this block of code in a script tag before </body> ending

let appgainConfig = {
  projectId: "<appgain-projectId>",
  apiKey: "<appgain-apiKey>",
  userId: "userId", //optional
};

Appgain.init(appgainConfig)
  .then((res) => {
    console.log(res);
  })
  .catch((err) => {
    console.log(err);
  });

Initializing (HTTP)

Note: The web push subscription for HTTP Web Apps it works as follows:

A POP-UP appears to the User asking him if he wants to receive Notifications from the Website
If the User accepts the POP-UP a 450 x 450 px window with this address:'https://project-subdomain.appgain.io/webpush ' pops up asking the User for the default browser Notification Alert.
If the User declines the first POP-UP, the User will never be asked about Push Notification Subscription again.
If the User accepts the first POP-UP and something goes wrong with the second window that pops up (for example User refresh or close the window before accepting), if the User opens the website again after 24 hours, the first POP-UP will appear again, asking the User if he/she would like to subscribe for notifications.

-Initializing Appgain SDK using Appgain.init requires an appgainConfig object that includes

projectId: from Appgain Dashboard -> Project Settings -> Basic Settings ->API and SDK Keys
apiKey: from Appgain Dashboard -> Project Settings -> Basic Settings ->API and SDK Keys
quickInstall: This attribute's value must be true if your Web App is using HTTP not HTTPS
userId [optional]: If the userId is not passed into the

appgainConfig object, the SDK will search for the userId in the localStorage or in the URL query, if no userId has been found the SDK generate a custom userId.

Place this block of code in a script tag before </body> ending

let appgainConfig = {
  projectId: "<appgain-projectId>",
  apiKey: "<appgain-apiKey>",
  quickInstall: true, //is a must for HTTP Web Apps,
  userId: "userId", //optional
  websiteName: "Website Name", //optional in case of null, the subdomain will be used in the Request Notification POP-UP
};

Appgain.init(appgainConfig)
  .then((res) => {
    console.log(res);
  })
  .catch((err) => {
    console.log(err);
  });

SDK Methods

Once you call Appgain.init(config) you will able to call the rest of the SDK Methods.

Appgain.updateUser: This method takes a userInfo:JSON as a param and updates the current active User (generated by the Appgain.init) with the new values.

Appgain.logPurchase: This method takes (productName, amount(total paid money), currency, campaignId) as input params to log user's purchase action.

Appgain.logEvent: This method takes (eventName, amount, action, extras:json) as input params to log a custom user event, also note that extras requires a {key: value}.

Appgain.webPushSubscribe: This method asks the User to Enable browser Notifications for this website, note that it gets called automatically by calling the Appgain.init method.

Appgain.webPushUnSubscribe: This method unsubscribes the current User from our Notification System.

Set Custom User Attributes

You can update existing user info or add new data by calling the updateUser() method.

let userData = {
  name: "Username",
  email: "userEmail@example.com",
};

Appgain.updateUser(userData)
  .then((res) => {
    console.log(res);
  })
  .catch((err) => {
    console.log(err);
  });

Revenue Tracking

Appgain.logPurchase(productName, amount(total paid money), currency, campaignId)

Appgain.logPurchase("productName", 100, "currency", "campaignId")
  .then((res) => {
    console.log(res);
  })
  .catch((err) => {
    console.log(err);
  });

Custom Events Tracking

let type = "type";
let action = "action";
let extras = { key: "value" };
Appgain.logEvent(type, action, extras)
  .then((res) => {
    console.log(res);
  })
  .catch((err) => {
    console.log(err);
  });

Marketing Automation

fireAutomator("triggerPoint", { key: "value" })
  .then((res) => {
    console.log(res);
  })
  .catch((err) => {
    console.log(err);
  });