iframewidget

1.1.5 • Public • Published

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.

screenshot screenshot

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>


    </>)
}

Package Sidebar

Install

npm i iframewidget

Weekly Downloads

0

Version

1.1.5

License

MIT

Unpacked Size

8.65 kB

Total Files

5

Last publish

Collaborators

  • ravisingh5678