Get Started

Poppy JS is a simple, multipurpose pop-in message creator for marketers, freelancers and hobbyists. It is easy to install and make it work.

Projects with frameworks or ES6+

Poppy can be installed via NPM using node package manager or with Yarn.

npm install poppyjs or yarn add poppyjs

Once the package is installed, import Poppy as below.

          
            import Poppy from "poppyjs";

            // ...

            let pop = new Poppy({
              title: {
                text: "Title of Poppy goes here",
              },
              coverImage: "IMAGE_URL"
            });
            pop.show();
          
        

Using directly in browser

Add the Poppy script via the jsDelivr CDN and set up your pop-in message.

          
            <script src="https://cdn.jsdelivr.net/npm/poppyjs"></script>
            <script>
              let pop = new Poppy({
                title: {
                  text: "Hello"
                },
                coverImage: "IMAGE_URL"
              });
              pop.show();
            </script>
          
          

Supported Options

List of all the options supported by Poppy for configurability.

        
  new Poppy({
    title: {
        text: String, // Title text (Default : "")
        avatar: String, // Avatar image URL (Default : "")
        color: String,  // Color Code (Default : "")
    },
    content: String, // Content text (Default : "")
    cta: {
        text: String, // CTA text (Default : "")
        url: String, // CTA Link URL (Default : "")
        color: String, // Color Code (Default : "")
        newtab: Boolean, // To open the CTA link in a new tab (Default : false)
        onclick: Function, // Callback function when CTA button is clicked (Default : () => {})
    },
    coverImage: String, // Cover image URL (Default : "")
    position: String, // Potision (topLeft, topRight, bottomLeft, bottomRight) (Default : "bottomRight")
    delay: Number, // Delay in ms before displaying poppy (Default : 0),
    closeAfter: Number, // Time in ms after which the poppy should auto-close (Default : null)
  })