web-frame-lib

1.0.8 • Public • Published


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

Package Sidebar

Install

npm i web-frame-lib

Weekly Downloads

4

Version

1.0.8

License

MIT

Unpacked Size

16 kB

Total Files

5

Last publish

Collaborators

  • pushkarydv