web-frame-lib

Web Frame lib

Web Frame lib allows you to easily integrate your bots, dynamic pages and other with button trigger based architecture into you apps.

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