synthesis-widget
v0.1.2
Published
Embeddable React widget for displaying a catalog in an iframe modal with chatbot integration
Maintainers
visions-anthonyReadme
Synthesis Widget
Overview
This library provides an embeddable React widget that displays a catalog in an iframe modal with chatbot integration.
System Requirements
- [x] Node version 18 or higher is required.
- [x] React
Getting Started
NPM
Install the package with either npm or pnpm:
npm install synthesis-widgetpnpm add synthesis-widgetImport 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>