instawidget
webrtc react components and vanilla js bundle to embed button or widget on your website
Install
npm install --save @amanisystemsinc/instawidgetUsage
To use this package you must register yourself in the amanisysteminc instaconnect website and from the dashboard you will get the accessToken that you need to pass as a prop. You have to pass only a single prop . And if you want just the textchat component, you have to pass that.
import InstaWidget from "@amanisystemsinc/instawidget";
class Example extends Component {
render() {
return <InstaWidget accessToken={accessToken} textchat />;
}
}Usage in plain html file as vanilla js
-
Step 1: Add a DOM Container to the HTML
Add an empty
<div>tag to mark the spot where you want to display the widget/button. For example:
<!-- ... existing HTML ... -->
<div id="instawidget"></div>
<!-- ... existing HTML ... -->We gave this <div> a unique id HTML attribute. This will allow us to find it from the JavaScript code later and display a React component inside of it.
-
Step 2: Add the Script Tags and necessary css
Next, add three<script>tags to the HTML page right before the closing</body>tag andcssinside<link>tag in<head>of HTML :
<!-- ... Load css inside head ... -->
<link rel="stylesheet" href="https://unpkg.com/@amanisystemsinc/instawidget/umd/main.c967f187.css"
/>
<!-- ... other HTML ... -->
<!-- Load React. -->
<!-- Note: when deploying, replace "development.js" with "production.min.js". -->
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<!-- Load our React component. -->
<script src="https://unpkg.com/@amanisystemsinc/instawidget/umd/instawidget.min.js"></script>
</body>The first two tags load React. The third one will load your component code.
- Step 3: Open another
scripttag and use the components like this
<script>
const e = React.createElement;
const domContainer = document.querySelector("#instawidget");
const configObj = {
accessToken: acessToken,
buttonText = "Contact Us", //default is 'Contact Us', this text will appear as button text
textchat: false, //default value is false, if you use true it will only give you a textchat window
deptwise: false, //default value is false, you can use `true` to get a department wise view
style: { variant: "outlined", color: "primary" }, //variant can be `contained|text`, color can be `inherit|secondary`, size can be `large|medium|small`
};
ReactDOM.render(e(instaWidget, configObj), domContainer);
</script>-
Step 4(Optional): Tip: Minify JavaScript for Production
Before deploying your website to production, be mindful that unminified JavaScript can significantly slow down the page for your users. If you already minify the application scripts, your site will be production-ready if you ensure that the deployed HTML loads the versions of React ending in production.min.js:
<script
src="https://unpkg.com/react@17/umd/react.production.min.js"
crossorigin
></script>
<script
src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"
crossorigin
></script>If you don’t have a minification step for your scripts, here’s one way to set it up.
License
MIT © amanisystemsinc