synthesis-widget
Version:
Embeddable React widget for displaying a catalog in an iframe modal with chatbot integration
136 lines (102 loc) • 3.09 kB
Markdown
# 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:
```bash
npm install synthesis-widget
```
```bash
pnpm add synthesis-widget
```
Import the widget component and use it in your React application and import the corresponding CSS:
```js
import { SynthesisWidget, Domain, Marketplace } from "synthesis-widget";
import "synthesis-widget/style.css";
function App() {
return <SynthesisWidget />;
}
```
Import the widget component with specific queries:
```js
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](https://www.npmjs.com/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](https://esm.sh/).
Add the following script at the bottom of your HTML file:
```html
<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:
```html
<link
rel="stylesheet"
href="https://visionsofficial.github.io/synthesis-widget/css/index.css"
/>
```
---
#### Complete HTML Example
```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>
```