How to use?

• Install web-frame-lib package from npm

  npm i web-frame-lib

• Adding to your Project

  import { useEffect } from 'react';
  import { initWebFrame } from 'web-frame-lib';
  
  const App = () => {
  
      //  this will mount it after page render
      useEffect(()=>{
          initWebFrame({
              url: 'https://your-website.com',
          })
  
          // other options available below in Readme
      },[]);
  
      return(
          <>Hello</>
      )
  }
  

• That's all your chatbot, message service or whatever you ahve done is now availabe in your app with just a click of button.

Options

• Edit config object

  initWebFrame({
      url: 'https://your-website.com',
      config: {
          activatorText: `Chat With US`, //default
          closeText: `Close`, //default
          color: `#000`,  //default
          backgroundColor: `#fff`,    //default
          wfl_css: wfl_css,  //default
          css: ``,   // add custom css triggering classes inside
      },
      executeAfterWfl: (config, button) => {
          //  this will execute within scope of this script so that you can perform additional actions
          console.log('executeAfterWfl', config, button)
      },    
  })

Styling

| id | description | | --- | --- | | wfl-cta-button | Primary Triggering button | | wfl-cross | Cross button on mobile ui (ful screen) | | wfl-frame | iframe container |

• to apply additional customization you can pass a string of all css inside config object

Package Developed by Pushkar Yadav. For Support please contact here