> For the complete documentation index, see [llms.txt](https://developer.paychant.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://developer.paychant.com/integrations/overlay-embed.md).

# Overlay Embed

The Overlay embed implementation allows you to embed the Paychant widget into your app or website. This method of integration opens the Paychant widget as a pop-up overlay on your app or website when the Javascript SDK is loaded. No new tab, this experience enables users to remain on your app or website.

<figure><img src="/files/7DaIWVmnxr43LakGDYFf" alt=""><figcaption></figcaption></figure>

**Using the Paychant Javascript SDK**

The method for this implementation is by placing the Paychant SDK right into your HTML files using a script tag, and the SDK will load via a CDN. Below is how to do the integration.

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Paychant</title>

    <!-- Paychant SDK -->
    <script 
      src="https://paychant.com/inline/v1" 
      crossorigin="anonymous">
    </script>
    
  </head>
  <body>
    <button type="button" onclick="triggerPaychant()">
      Buy & Sell with Paychant
    </button>

    <!-- Start Paychant on button click -->
    <script type="application/javascript">
      const triggerPaychant = () => {
        new PaychantWidget({
           env: 'production',
           action: 'buy',
           partnerApiKey: [YOUR_PRODUCTION_PARTNER_API_KEY]',
           partnerLogoUrl: [YOUR_BRAND_LOGO_URL],
           partnerThemeColor: [YOUR_BRAND_THEME_COLOR],
           callback: {
              onClose: function() {
                 // console.log('window closed');
              },
              onStatus: function(txStatus) {
                 // console.log(txStatus);
              },
           },
        }).openWindow();
      }
    </script>
  </body>
</html>
```

By clicking the button, the Paychant widget is going to pop up.

The available configuration parameters that can be passed to Paychant, can be found [here](/integrations/parameters.md).
