1

Prerequisites

Before installing the TakeProfit Widget SDK, ensure that you meet the following requirements:
  • Package Manager: The SDK is distributed via npm, so you should have either npm (comes with Node.js) or yarn installed.
  • Project Setup: Ensure you have an existing project directory with a basic configuration, such as a package.json file. If not, you can create one with: 
    npm init -y
2

Install the SDK

The TakeProfit Widget SDK is available as an npm package. To install it, run the following command in your project directory:
npm install takeprofit-widget-sdk
If you prefer using yarn, you can install it with:
yarn add takeprofit-widget-sdk
This command will add the SDK as a dependency in your package.json file and download it to the node_modules directory.

​
Verifying Installation

After installation, you should see takeprofit-widget-sdk listed under "dependencies" in your package.json file, like this:
"dependencies": {
  "takeprofit-widget-sdk": "^0.2.3"
}
Note: Replace ^0.2.3 with the version number you have installed.
3

Initialize the SDK in Your Project

Once installed, you can begin using the SDK by importing it into your project files. Here’s a simple setup example:
  1. Import the SDK: Open the main file where you intend to initialize the SDK (e.g., index.js, app.js, or main.ts) and import the SDK: 
    import { TPWidgetSDK } from "takeprofit-widget-sdk";
  2. Basic Initialization: To ensure the SDK is correctly initialized, call the connect method when your widget is ready to communicate with the platform: 
    TPWidgetSDK.connect();
  3. Hiding the Loader: To let the TakeProfit platform know your widget is ready, use the hideLoader function after initialization: 
    TPWidgetSDK.hideLoader();
This confirms that the SDK is successfully integrated and your widget can begin communicating with the platform.
4

Verify Installation

After setting up the SDK in your project, follow these steps to verify that it’s working correctly:
  1. Test Initialization:
    • Run your project (typically with npm start or yarn start).
    • Check the browser’s developer console to ensure there are no errors related to takeprofit-widget-sdk.
  2. Local Storage Configuration (for local widget testing):
    • Open Take Profit Platform in your browser.
    • Open your browser’s console and set up a local storage entry for your widget to test it on the TakeProfit platform interface.
    • Run this command in the browser console: 
      localStorage.setItem(
	"takeprofit.integrations.third_party_widget_options",
	JSON.stringify([
		{
			iframeUrl: "<your iframe URL>",
			enableChannelSupport: false,
			title: "Test Widget",
			imageUrl: "<icon URL>",
		},
	])
);
    • Replace <your iframe URL> and <icon URL> with the actual URLs for testing.
    • Reload the page and verify that your widget appears in the TakeProfit widget panel.

​
Common Issues & Troubleshooting

Here are some common issues you may encounter during installation, along with solutions:
By following this guide, you should now have the TakeProfit Widget SDK installed and ready for further customization and development.