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);