.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();
  }
})();


Overview

Generate button code

Add button code

Test the flow

Vendr Partners

Documentation

Solutions

Dashboard

Support

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

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

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

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

Webhooks

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.

Get Started

Tools

UI Components

Create an Offer Button

Overview

Generate button code

Add button code

Test the flow

Get Started

Tools

UI Components

​Overview

​Generate button code

​Add button code

​Test the flow

Overview

Generate button code

Add button code

Test the flow