.dark\:bg-background-dark:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: #0A080C;
}

#navigation-items h5 {
    text-transform: uppercase;
}

.dark\:border-gray-300\/\[0\.06\]:is(.dark *) {
    background: linear-gradient(90deg, rgba(60, 0, 217, 0.003) 0%, rgba(65, 129, 255, 0.03) 50%, rgba(69, 6, 255, 0.04) 100%);
}

#home-gif {
width: 900px;

}

// script.js

(function() {
  console.log('Script started.');

  function initVendrButton() {
    console.log('Initializing Vendr button.');

    // Load the Vendr script
    var script = document.createElement('script');
    script.src = 'https://cdn.vendr.com/v1/vendr-link.js';
    script.async = true;

    script.onload = function() {
      console.log('Vendr script loaded successfully.');

      // Start observing the DOM for the placeholder div
      observePlaceholder();
    };

    script.onerror = function() {
      console.error('Failed to load Vendr script.');
    };

    document.head.appendChild(script);
    console.log('Vendr script appended to document head.');
  }

  function observePlaceholder() {
    console.log('Observing for placeholder div.');
    var targetNode = document.body;
    var config = { childList: true, subtree: true };

    var observer = new MutationObserver(function(mutationsList, observer) {
      var container = document.getElementById('vendr-button-container');
      if (container) {
        console.log('Found container for Vendr button.');
        createVendrButton(container);
        observer.disconnect(); // Stop observing once we've found the container
      }
    });

    // Start observing the target node for configured mutations
    observer.observe(targetNode, config);
  }

  function createVendrButton(container) {
    console.log('Creating Vendr button.');

    // Create the Vendr button element
    var vendrButton = document.createElement('vendr-button');

    // Set the desired properties using JavaScript
    vendrButton.setAttribute('mode', 'private-offer');
    vendrButton.setAttribute('slug', 'drata');
    vendrButton.setAttribute('publicKey', 'x8a0r6kTTpchSmjkwP8oW7p2q7hFfAf7');

    container.appendChild(vendrButton);
    console.log('Vendr button appended to container.');
  }

  // Check if the DOM is already loaded
  if (document.readyState === 'loading') {
    console.log('Document is still loading, attaching DOMContentLoaded event.');
    document.addEventListener('DOMContentLoaded', initVendrButton);
  } else {
    console.log('Document is already loaded.');
    initVendrButton();
  }
})();


Status Definitions

Example Webhook Payload

Webhook Events

Vendr Partners

Documentation

Solutions

Dashboard

Support

Explore how to use webhooks to receive real-time updates on actions your users take.

Webhooks

Unlock new value for your users with our industry-leading SaaS saving tools.

Overview

Generate a static button for users to get a low price estimate or offer in your app in minutes - no coding required

Create an Offer Button

Dynamically embed a Vendr UI button for users to get a low price estimate or offer, manage user sessions, and customize the user experience with minimal development effort using our SDK and custom UI components

Embed Offer Button UI

Get a fast, personalized low price estimate or quote without the need for a sales call.

Get Offer or Estimate

Ensure Your Users Are Getting the Best Deal

Verify Price

Transform Decision-Making with Powerful SaaS Pricing Data

See What Other Are Paying

Explore potential savings across your entire SaaS stack by supplier.

Discover Savings Potential

Dynamically embed Vendr UI, manage user sessions, and customize the user experience with minimal development effort

Vendr Connect

Offer SaaS Marketplace and Price Intelligence features in minutes - no coding required

Vendr Link

Tools and libraries for integrating Vendr into your web application.

SDKs

Use this component when you want to provide users the ability to perform a specific action when a button is pressed

Button

Use this component to allow users to perform an action from within a modal without requiring them to click the button UI component.

Modal

Use this component to present users with a primary task and an option to complete a secondary action if needed

Offer Card

Use this component when you want to provide users the ability to perform a single action to move to the next step.

Status	Description
Incomplete	The offer is in draft and hasn’t been fully completed.
Open	The offer has not been started.
Being Prepared	The offer is being actively worked on.
Expired	The offer was not acted upon within a certain timeframe and is no longer valid.
Delivered	The offer has been sent and is under review.
Accepted	The offer has been accepted.
Rejected	The offer has been rejected.
Purchased	The offer was accepted and the final order form has been signed by both parties.

Get Started

Tools

UI Components

Webhooks

Webhook Events

Status Definitions

Example Webhook Payload

Get Started

Tools

UI Components

​Webhook Events

​Status Definitions

​Example Webhook Payload

Webhook Events

Status Definitions

Example Webhook Payload