Embedding Decide Views

Merchants seeking to enhance their portals with insightful data visualization can seamlessly integrate Decide views. Decide offers various widgets that can be embedded into merchant portals using iframes or popups. These views, accessible through the /widgets route in Decide MP, empower merchants to enrich their platforms with Decision Intelligence capabilities. However, to ensure the security of merchant-specific data, authentication is required before displaying embedded views.


Accessing Widget Views

Step 1: Obtain a Valid Token

Before embedding Decide views, merchants must obtain a valid token through the Decide API login endpoint. Please refer to the instructions provided here for detailed guidance on generating a token using your ClientID and Key.

Step 2: Displaying a View

To display a view, append the generated token as a query parameter when requesting the widget in the corresponding /widgets subpath. Here are some examples:

  1. To access the create scorecards page: {baseurl}/widgets/scorecards?token={the-generated-jwt}

  2. To edit a scorecard: {baseurl}/widgets/scorecards/{id}?token={the-generated-jwt}

  3. To view scorecard result: {baseurl}/widgets/scorecards/{scorecard_result_id}?token={the-generated-jwt}

    1. Scorecard_result_id is alphanumeric e.g ff5f0512-1626-4478-af3f-f250d231fb00

    2. This can be obtain from the execute scorecard response

  4. To view analysis: {baseurl}/widgets/analysis/{id}?token={the-generated-jwt}

When Decide MP receives a request in the /widgets route, it uses the token to fetch the required data. If the token is valid, the data is retrieved, and the view is displayed. Otherwise, an error message is shown.

Generating JWT for Authentication

For information on generating a JWT for authentication using ClientID and Key, please refer to this link.

Parameters for Views

  • Create Scorecards: /widgets/scorecards?token={the-generated-jwt} (No additional parameters needed)

  • Edit Scorecards: /widgets/scorecards/{id}?token={the-generated-jwt} (Parameter: {id} - the scorecard ID)

  • Analysis Page: /widgets/analysis/{id}?token={the-generated-jwt} (Parameter: {id} - the analysis ID)

  • {baseurl}/widgets/scorecards/{scorecard_result_id}?token={the-generated-jwt} (Parameter: {scorecard_result_id} - the scorecard result ID)

Handling Event Callbacks

The iframe triggers events upon successful or failed attempts in creating or editing a scorecard. To capture these events on your site, implement the following code:

JavaScript

window.addEventListener("message", (event) => { const { data : { eventName, isSuccess, data } } = event; console.log({ eventName, isSuccess, data }); }, false);

The event.data object contains the following properties:

  • eventName: The name of the action being performed (e.g., "create-scorecard").

  • isSuccess: A boolean indicating whether the action was successful (true) or failed (false).

  • data: Holds the data returned from the payload if successful or error details if the action failed.


Conclusion

By following the outlined steps and guidelines, merchants can seamlessly integrate Decide views into their portals, enhancing their functionality and providing valuable insights to their users. If you encounter any issues or require further assistance, please refer to our documentation or reach out to our support team for prompt assistance.