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 firebase-messaging-sw.js and add it to your website root directory (e.g. public/firebase-messaging-sw.js).

Note: firebase-messaging-sw.js is required for push notifications to work.

Installation on multiple pages website

• Add the following code to your website pages head tag

<script src="https://cdn.appgain.io/docs/appgain/appgainSdk/websdk/AppgainSDK.min.js"></script>

• Add the following code to your website pages body tag

<script>
  const appgainConfig = {
    projectId: "<Your Project ID>",
    apiKey: "<Your API Key>",
    websiteName: "<Your Website Name (Optional)>",
    userId: "<Your User ID (Optional)>",
    useCustomModal: true, // Optional - defaults to false
  };

  AppgainSDK.init(appgainConfig)
    .then((response) => {
      console.log("Appgain SDK initialized successfully", response);
    })
    .catch((error) => {
      console.log("Appgain SDK initialization failed", error);
    });
</script>

• Add firebase-messaging-sw.js to your website root directory (e.g. public/firebase-messaging-sw.js).

Note: firebase-messaging-sw.js is required for push notifications to work.

Installation on single page website

• Add the following code to your website index.html head tag

<script src="https://cdn.appgain.io/docs/appgain/appgainSdk/websdk/AppgainSDK.min.js"></script>

• Add the following code to your website starter component (e.g. App.js, App.vue, index.js, etc...)

const appgainConfig = {
  projectId: "<Your Project ID>",
  apiKey: "<Your API Key>",
  websiteName: "<Your Website Name (Optional)>",
  userId: "<Your User ID (Optional)>",
  useCustomModal: true, // Optional - defaults to false
};

try {
  await AppgainSDK.init(appgainConfig);
  console.log("Appgain SDK initialized successfully");
} catch (error) {
  console.log("Appgain SDK initialization failed", error);
}

• Add firebase-messaging-sw.js to your website root directory (e.g. public/firebase-messaging-sw.js).

Note: firebase-messaging-sw.js is required for push notifications to work.

SDK Methods

Available SDK Methods

Our SDK provides a range of functions to help you engage with your users. The methods are as follows:

1. AppgainSDK.updateUser(userInfo): Update the current user with new information.

2. AppgainSDK.logPurchase(productName, amount, currency, campaignId): Log a purchase by the user.

3. AppgainSDK.logEvent(eventName, amount, action, extras): Log a custom event.

4. AppgainSDK.webPushSubscribe(): Subscribe users to receive browser notifications.

5. AppgainSDK.webPushUnSubscribe(): Unsubscribe users from receiving browser notifications.

Each method serves a specific purpose and can be called at any time. They are designed to make it easy to integrate with your website and provide valuable insights into your users' behavior.

Remember, these methods can be called after you call AppgainSDK.init(config).

---

Set Custom User Attributes

If you want to update the current user's information, you can use the updateUser() method. Here's an example of how to use it:

Set Custom User Attributes

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

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

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

Boost Your Revenue!

Log purchases to gain valuable insights into your users' behavior and optimize your marketing campaigns.

Custom Events Tracking

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

Marketing Automation

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