> For the complete documentation index, see [llms.txt](https://docs.casava.co/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.casava.co/widget/javascript-popup-widget.md).

# Javascript Popup Widget

## Usage

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

```javascript
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>casava widget Example</title>
    <script src="https://widget.sandbox.casava.co/v1/inline.js"></script>
    <style>
        .paynow{
            background: red;
            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            border: none;
            padding: 10px;
            cursor: pointer;
           margin-top: 20px;
           width: 400px;
           background: #FFFFFF;
            border: 1px solid #E0E6ED;
        }

   .fpctr{
    background: #FFFFFF;
    border: 1px solid #E0E6ED;
    border-radius: 8px;
    width: 400px;
    height: 44px;
    margin-bottom: 10px;
    padding: 10px;
   }
   .dcenter{
     width: 100%;
     margin: 10px auto;
     flex-direction: column;
     display: flex;
     justify-content: center;
     align-items: center;
   }
       
    </style>

  </head>
  <body>
    <h1>Test widget payload</h1>

<div class="dcenter">
  <input placeholder="Enter Name" class="fpctr name" type="text">
  <input placeholder="Enter Email"  class="fpctr email" type="text">
  <input placeholder="Enter Phone number"  class="fpctr phone" type="text">
  <input placeholder="Enter Salary"  class="fpctr salary" type="text">
  <input placeholder="Enter Company Name"  class="fpctr companyName" type="text">
  <input placeholder="Enter Company Address"  class="fpctr companyAddress" type="text">
  <input placeholder="Enter Partner Key"  class="fpctr key" type="text">

  <button class="paynow">Buy Insurance</button>
</div>
 

   
    <script>
         const myButton = document.querySelector(".paynow")
         
        
    
    myButton.addEventListener("click", ()=>{
      const name = document.querySelector(".name").value
         const email = document.querySelector(".email").value
         const phone = document.querySelector(".phone").value
         const salary = document.querySelector(".salary").value
         const companyName = document.querySelector(".companyName").value
         const companyAddress = document.querySelector(".companyAddress").value
         const key = document.querySelector(".key").value

      
    CasavaCheckout({
      name: name,
      email: email,
      phone:phone,
      salary: salary,
      companyName: companyName,
      companyAddress: companyAddress,
      key: key,
      onClose: (data)=>{
        console.log(data);
      },
      callback: (data)=>{
        console.log(data);
      },
      onError: (data)=>{
        console.log(data);
      }
      
      })

    })

   
    
    </script>
    
  </body>
</html>

```

**Key things to point out on this code:**

First, you include the Casava Inline library with a script tag:

```
<script src="https://widget.sandbox.casava.co/v1/inline.js"></script>
```

Next, Get your partner public key from your partner sandbox dashboard at  [https://partner.sandbox.casava.co](http://partner.sandbox.casava.co/)

Now setup your button to call the Casava widget.  <mark style="color:orange;">`CasavaCheckout()`</mark> with your partner public  key and other custom parameters&#x20;

## Calling <mark style="color:orange;">`CasavaCheckout()`</mark>

The <mark style="color:orange;">`key`</mark> is your Casava public key. **This is the only compulsory parameter when calling this checkout function.**&#x20;

The <mark style="color:orange;">`name`</mark> is your customer name. This can also be first name and last name separated  with space in this format <mark style="color:orange;">`John Doe`</mark>

The <mark style="color:orange;">`email`</mark> is your customer email

The <mark style="color:orange;">`phone`</mark> is your customer phone number&#x20;

The <mark style="color:orange;">`salary`</mark> is your customer salary &#x20;

The <mark style="color:orange;">`companyName`</mark> is your customer company name

The <mark style="color:orange;">`companyAddress`</mark> is your customer company address

The <mark style="color:orange;">`onClose`</mark> is a method that is called when the modal is closed

The <mark style="color:orange;">`callback`</mark> is a method that is called once the customer buys a policy &#x20;

The <mark style="color:orange;">`onError`</mark> is a method that is called once an error occurs
