Embed Offer Button UI
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
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://cdn.vendr.com/v1/vendr-link.js"></script>
Install SDK
Install the SDK via npm
npm install @vendr/connect-sdk
Then, import it into your project:
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.
Mode | Description |
---|---|
private_offer | Request a hassle-free quote for a product at a negotiated price. |
supplier_website_domain
in the create session request 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();
Was this page helpful?