List of Sections

Embed Datanyx Widgets into a Third-Party Application

This guide explains how to embed Datanyx Widgets into your third-party web application using Vanilla JavaScript or React.

Prerequisites

Below are the Prerequisites

Datanyx Embed API Script is available at:

https://<Domain-Name>/assets/js/embed-api/v2/datanyx-embed-api.min.js

Embed URL please use:

https://<Domain-Name>/embedIframe-uzio

You must provide an options object when creating the embed. This object includes:
- ApplicationId → provided by Datanyx
- Token → From external application
- View → It is optional parameter, Can be used to provide different types of views from Datanyx Application.
Domain-Name refers to the server where your Datanyx application is running.

1. Embedding with JavaScript

Step 1: Add the Datanyx Script

Include the embed API script in your index.html:

This script loads the DatanyxEmbedAPI object globally.

Step 2: Create a Container

In your HTML, add a <div> that will act as the container for the embedded app:

Step 3: Initialize the Viz Object

In your app.js (or any main JavaScript file), initialize the Datanyx embed:

document.addEventListener(“DOMContentLoaded”, function () {
// Embed URL where the application will be loaded
const embedUrl = “https://<Domain-Name>/embedIframe-uzio”;

// Options object passed when initializing the embed
const options = {
ApplicationId: “<Your-Application-ID>”,
Token: “<Your-Token>”
};

// Get the container element
const containerElem = document.getElementById(“datanyxContainer”);

// Create the Datanyx visualization object
const datanyxVizObj = new DatanyxEmbedAPI.Viz(containerElem, embedUrl, options);
});

DatanyxEmbedAPI is available globally from the script.
No var declaration is required in JavaScript.

2. Embedding with React

Step 1: Add the Script in public/index.html

Inside your React project’s public/index.html, include the script before your bundled app loads:

Step 2: Create a React Component

Create a reusable React component (DatanyxEmbed.js):

import React, { useEffect, useRef } from “react”;

const DatanyxEmbed = () => {
const containerRef = useRef(null);

useEffect(() => {
    // Ensure the script has loaded and container exists
    if (window.DatanyxEmbedAPI && containerRef.current) {
      const embedUrl = “https://<Domain-Name>/embedIframe-uzio”;

      // Options object passed when initializing the embed
      const options = {
        ApplicationId: “<Your-Application-ID>”,
        Token: “<Your-Token>”
      };

      // Initialize Datanyx Viz object
      new window.DatanyxEmbedAPI.Viz(containerRef.current, embedUrl, options);
    }
}, []);

return (
    <div>
      <h2>Embedded Datanyx App</h2>
      <div ref={containerRef} style={{ width: “100%”, height: “600px” }}></div>
    </div>
);
};

export default DatanyxEmbed;

In React, use window.DatanyxEmbedAPI because React runs in module scope where global variables are not directly accessible.

Step 3: Use the Component in Your App

In App.js:

import React from “react”;
import DatanyxEmbed from “./DatanyxEmbed”;

function App() {
return (
    <div>
      <DatanyxEmbed />
    </div>
);
}

export default App;

Key Notes

Options object must always include ApplicationId and Token (provided by Datanyx).
JavaScript: Use DatanyxEmbedAPI directly (global scope).
React: Use window.DatanyxEmbedAPI to access the global script safely.
The <Domain-Name> must match the domain where Datanyx is hosted.
Always load the Datanyx script before trying to initialize the Viz object.