Installation

You can install Social App SDK by using Nmp or Yarn:

npm install --save @haravan/social-app-sdk

or

yarn add @haravan/social-app-sdk

Social App SDK can also be included directly on a page with a script tag pointing to a CDN-hosted copy of the library. Unpkg is an example of a CDN that hosts npm modules.

<script src="https://unpkg.com/@haravan/social-app-sdk"></script>
<script>
  var AppBridge = window['social-app-sdk'];
  var actions = window['social-app-sdk'].actions;
</script>

Usage

Initializing Social App SDK

Import the library from the @haravan/social-app-sdk package and provide a configuration:

import {createApp} from '@haravan/social-app-sdk';

const app = createApp({
  apiKey: 'API key from Haravan Partner Dashboard',
  targetOrigin: targetOrigin,   // "app.harasocial.com"
});

Using ES5 and the CDN-hosted version:

var AppBridge = window['social-app-sdk'];
var createApp = AppBridge.createApp;
var app = createApp({
  apiKey: 'API key from Haravan Partner Dashboard',
  targetOrigin: targetOrigin,   // "app.harasocial.com"
});

Actions

Social App SDK introduces the concept of actions. An action provides a way for applications and hosts to trigger events with a statically-typed payload.

Redirect

import {createApp, actions} from '@haravan/social-app-sdk'

const app = createApp({
  apiKey: "03bf984d180772b9329f8188094960f6",
  targetOrigin: "app.harasocial.com"
});

let redirect = actions.Redirect.create(app);

//Redirect to accounts.haravan.com 
redirect.dispatch(actions.Redirect.Action.REMOTE, "https://accounts.haravan.com");

//Redirect to accounts.haravan.com with newContext
redirect.dispatch(actions.Redirect.Action.REMOTE, {
   url: "https://accounts.haravan.com",
   newContext: true
});

Toast

import {createApp, actions} from '@haravan/social-app-sdk'

const app = createApp({
  apiKey: "03bf984d180772b9329f8188094960f6",
  targetOrigin: "app.harasocial.com"
});

//Create a toast notice
const toastOptions = {
    message: 'Action saved',
    duration: 4, //second
};
const toastNotice = actions.Toast.create(app, toastOptions);
toastNotice.dispatch(actions.Toast.Action.SHOW);

//Create a toast error message
const toastOptions = {
    message: 'Error saving',
    duration: 4, //second
    isError: true,
};
const toastError = actions.Toast.create(app, toastOptions);
toastError.dispatch(actions.Toast.Action.SHOW);

Loading

import {createApp, actions} from '@haravan/social-app-sdk'

const app = createApp({
  apiKey: "03bf984d180772b9329f8188094960f6",
  targetOrigin: "app.harasocial.com"
});

const loading = actions.Loading.create(app)

//Start loading
loading.dispatch(actions.Loading.Action.START)

//Stop loading
loading.dispatch(actions.Loading.Action.STOP)

Message Composer

import {createApp, actions} from '@haravan/social-app-sdk'

const app = createApp({
  apiKey: "03bf984d180772b9329f8188094960f6",
  targetOrigin: "app.harasocial.com"
});

const messageComposer = actions.MessageComposer.create(app)
const action = actions.MessageComposer.Action;

//Text type
messageComposer.dispatch(action.TEXT, "Hi, I'm a text message")

//Image type
messageComposer.dispatch(action.IMAGE, {
   imageUrl: "https://product.hara.vn/200000003584/product/12_65048f4ab02845b985a70558d5645b49.jpg"
})

//Product type
 messageComposer.dispatch(action.PRODUCT, {
   title: "Product Title",
   subtitle: "Product subtitle",
   imageUrl: "https://product.hara.vn/200000003584/product/12_65048f4ab02845b985a70558d5645b49.jpg",
   buttonUrl: "https://app.harasocial.com"
})

Session Token

import {createApp, actions} from '@haravan/social-app-sdk'

const app = createApp({
  apiKey: "03bf984d180772b9329f8188094960f6",
  targetOrigin: "app.harasocial.com"
});

const sessionToken = await actions.SessionToken.getSessionToken(app);