iframewidget
v1.1.5
Published
A npm widget package to create a widget in react and nextjs app. By using this package you implement a Telegram connected chat bot and you create your own bot and show in widget.
Downloads
41
Maintainers
Readme
Widget npm package
- This is iFrame widget package to create widget of custum size and property.
- Get you webSite bot Reponse in your Telegram and Answer Them.
Follow my another Repositry Widget CDN repo to use this Widget as through CDN link.
Follow step to use this in your your next or react app.
- Install npm package.
npm i iframewidget
- Import it in your page.
import { Widget } from "iframewidget"
Use below tag to create a widegt get in your page
use below in those pages in which you want a widget bot.
GET YOUR TelechatbotId at @telewidget_bot
<Widget TelechatbotId="1234566" config={options}/>
- One move prop is availabe to show any web site inside a Iframe widget.
- when you use webserver prop don't need to pass TelechatbotId just pass random integer in it.
<Widget TelechatbotId="123456" config={options} webserver="https://www.google.com/"/>
- These are the available default options to customize you widget.
let options = {
Closebtncolor: "#ffffff",
Height: "480px",
Width: "360px",
chatIconRight: '50px',
chatIconBottom: '50px',
chatIconbgColor: "#121D9E",
chatIconcolor: '#ffffff',
title: 'Customer Support',
introMessage: 'Hello! How can we help you?',
visitorPronoun: 'You',
chatareabgcolor: "#000000",
titlecolor: "#ffffff",
titlebgcolor: "#121D9E",
placeholderText: 'Type your message...',
inputBgcolor: "#121D9E",
inputTxtcolor: "#ffffff",
displayMessageTime: true,
chatTextboxcolor: "#ffffff",
chatTextcolor: "#000000",
chatTimecolor: "#B0B0B0",
}
- After all you page.js looks like
import { Widget } from "iframewidget"
export default function Home() {
let options = {
Closebtncolor: "#ffffff",
Height: "480px",
Width: "360px",
chatIconRight: '50px',
chatIconBottom: '50px',
chatIconbgColor: "#121D9E",
chatIconcolor: '#ffffff',
title: 'Customer Support',
introMessage: 'Hello! How can we help you?',
visitorPronoun: 'You',
chatareabgcolor: "#000000",
titlecolor: "#ffffff",
titlebgcolor: "#121D9E",
placeholderText: 'Type your message...',
inputBgcolor: "#121D9E",
inputTxtcolor: "#ffffff",
displayMessageTime: true,
chatTextboxcolor: "#ffffff",
chatTextcolor: "#000000",
chatTimecolor: "#B0B0B0",
}
return (
<>
<div>
<Widget TelechatbotId="1234556" config={options}/>
<!-- your code here -->
</div>
</>)
}