Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

synthesis-widget

visions-anthony1.1kMIT0.1.2TypeScript support: included

Embeddable React widget for displaying a catalog in an iframe modal with chatbot integration

react, typescript, widget, synthesis, EU tech, federation, offers

readme

Synthesis Widget

Overview

This library provides an embeddable React widget that displays a catalog in an iframe modal with chatbot integration.

System Requirements

  • <input checked="" disabled="" type="checkbox"> Node version 18 or higher is required.
  • <input checked="" disabled="" type="checkbox"> React

Getting Started

NPM

Install the package with either npm or pnpm:

npm install synthesis-widget
pnpm add synthesis-widget

Import the widget component and use it in your React application and import the corresponding CSS:

import { SynthesisWidget, Domain, Marketplace } from "synthesis-widget";
import "synthesis-widget/style.css";

function App() {
  return <SynthesisWidget />;
}

Import the widget component with specific queries:

import { SynthesisWidget, Domain, Marketplace } from "synthesis-widget";
import "synthesis-widget/style.css";

function App() {
  return (
    <SynthesisWidget
      queries={{
        domain: ["media"] as Domain[],
        marketplace: ["visionstrust"] as Marketplace[],
      }}
    />
  );
}

You can use the Domain and Marketplace types for typing your queries.

NPM Package

Visit the NPM package page for installation and usage details:

NPM Package - synthesis-widget

CDN

If you're not using a module bundler or package manager, you can also use this widget via an ESM-compatible CDN such as ESM.sh.

Add the following script at the bottom of your HTML file:

<div id="root"></div>

<script type="module">
  import React from "https://esm.sh/react";
  import * as ReactDOMClient from "https://esm.sh/react-dom/client";
  import { SynthesisWidget } from "https://esm.sh/synthesis-widget";

  const root = ReactDOMClient.createRoot(document.getElementById("root"));
  root.render(
    React.createElement(
      React.StrictMode,
      null,
      React.createElement(SynthesisWidget)
    )
  );
</script>

To include the widget’s CSS, add the following <link> tag in the <head> of your HTML:

<link
  rel="stylesheet"
  href="https://visionsofficial.github.io/synthesis-widget/css/index.css"
/>

Complete HTML Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles/style.css" />
    <link
      rel="stylesheet"
      href="https://visionsofficial.github.io/synthesis-widget/css/index.css"
    />
    <title>Synthesis Widget Demo</title>
  </head>
  <body>
    <div id="root"></div>

    <script type="module">
      import React from "https://esm.sh/react";
      import * as ReactDOMClient from "https://esm.sh/react-dom/client";
      import { SynthesisWidget } from "https://esm.sh/synthesis-widget";

      const root = ReactDOMClient.createRoot(document.getElementById("root"));
      root.render(
        React.createElement(
          React.StrictMode,
          null,
          React.createElement(SynthesisWidget)
        )
      );
    </script>
  </body>
</html>