Widget SDK

Currently, the integration of new widgets is done manually and consists of several steps: Agree with management Coordinate the design Develop a test version Moderation Obtaining a subdomain and deploying the application to our servers

This package is a set of APIs for interaction of an embedded widget with the platform.

The widget is embedded on the takeprofit.com/platform dashboard via iframe.

Install

npm install takeprofit-widget-sdk

Get started

The only mandatory API call is to signal the ready of the widget:

import { TPWidgetSDK } from "takeprofit-widget-sdk";

...

// When the widget is ready, inform platform to hide the preloader
TPWidgetSDK.hideLoader()

Local Testing of Widgets

You can test your widget locally. To do this, you need to create an entry in localStorage with the following details:

• Name: takeprofit.integrations.third_party_widget_options
• Content: An array of objects with the structure:

    {
        "iframeUrl": string,
        "enableChannelSupport": boolean,
        "title": string,
        "imageUrl": string
    }

For example, you can add such an entry via the console:

localStorage.setItem(
  'takeprofit.integrations.third_party_widget_options',
  JSON.stringify([
    {
      iframeUrl: '<your iframe URL>',
      enableChannelSupport: false,
      title: 'Test',
      imageUrl: '<icon for widget panel>',
    },
  ]),
)

After the page reloads, your widget will appear in the widget panel on the right side of the page. From there, you can add it to the dashboard and test it out

A simple example of communicating with the platform. Log to console

import { TPWidgetSDK } from 'takeprofit-widget-sdk'

TPWidgetSDK.connect()

let widget = null
let channel = null
TPWidgetSDK.subscribeWidgetChange((widgetUpd) => {
  widget = widgetUpd
  console.log('widget info ', widget)
})
TPWidgetSDK.subscribeChannelChange((channelUpd) => {
  channel = channelUpd
  console.log('channel info ', channel)
})
const setAAPL = () => {
  TPWidgetSDK.requestChangeSecurity('AAPL;BATS', (data) => {
    console.log('set AAPL result ', data)
  })
}
const setMETA = () => {
  TPWidgetSDK.requestChangeSecurity('META;BATS', (data) => {
    console.log('set META result ', data)
  })
}
const setINVALID = () => {
  TPWidgetSDK.requestChangeSecurity('INVALID;BATS', (data) => {
    console.log('set unknown security result ', data)
  })
}
setTimeout(() => {
  console.log('send hide loader')
  TPWidgetSDK.hideLoader()
}, 100)
console.log('load iframe')