Embed Offer Button UI

​

Overview

Seamlessly integrate Vendr into your web application, enabling users to submit private offers, get price checks, and access pricing insights without leaving your app.

​

Install

To get started with the Vendr Connect, you will need to include the Vendr Connect <script> tag in your website or web application. This script will handle displaying the private offer button and display the private offer experience in an overlay on your site by using a lightweight front-end SDK.

​

Add script tag

Add the following script tag to your front-end application or website.

<script src="https://api.vendr.com/vendr.js"></script>

​

Install SDK

• Javascript
• React

npm install @vendr/connect-sdk

import VendrConnect from 'vendr-connect-sdk';

​

Initialize SDK

To use the SDK you will need to initialize it with your public key.

const vendr = new VendrConnect({
    publicKey: 'YOUR_PUBLIC_KEY',
});

​

Add Vendr UI

You can embed Vendr UI dynamically in your application. When the UI component is loaded on the page and the user clicks it, it will open the Private Offer request in an overlay.

​

Create a session

This session controls what your users sees on the overlay screen and hydrates the session with any relevant data like supplier or user details passed in the create session request.

By passing the mode attribute in the session request you can specify what flow the user will see when they click the Vendr button.

  vendr.createSession({ 
  supplier_website_domain: '1password.com', 
  user_token: '1ref090sadl382341sfg3', 
  external_account_id: '1ref090sadl382341sfg3', 
  mode: 'private_offer',
  onSuccess: (sessionData) => {
    console.log('Session created successfully:', sessionData);
    // Additional logic on success
  },
  onExit: () => {
    console.log('User exited the session');
    // Additional logic on exit
  },
  onFailure: (error) => {
    console.error('Failed to create session:', error);
    // Additional logic on failure
  }
});

​

Configure webhooks

Vendr can send session details to your backend server via a webhook when a user starts, completes, or exits a session. This allows your team to access all the session details provided by the user, along with additional metadata and insights collected by Vendr. You’ll have real-time access to conversion metrics, enabling you to monitor how your Vendr Connect sessions are performing.

Learn more about webhooks.

​

Advanced options

You can manually trigger the Vendr modal to open programmatically, bypassing the need for a user to click the button.

Use the openModal method after creating a session.

vendr.openModal();