Add Action Link

​

Overview

Create individual product and seller buttons with just a few clicks, enabling users to get quotes from your application or website—no coding required.

​

Create Action Link

1. Navigate to the Action Links page in the Partner Dashboard.
2. Click Create Action Link.
3. Select Price Estimate as the type.
4. Specify a product (optional). If no product is selected, the user will be prompted to search for a product.
5. Choose an accent color. This color will be applied throughout the entire action link flow.
6. Provide a display name for your action link. This will be displayed as the Company Name in the action link flow.
7. Add a label for the call to action. This label will be used for buttons and primary CTAs in the action link flow.
8. Assign a name to your action link. This name is used for reporting purposes and is not displayed to the end-user.

​

Create Action Link

1. Navigate to the Action Links page in the Partner Dashboard.
2. Click Create Action Link.
3. Select Price Estimate as the type.
4. Specify a product (optional). If no product is selected, the user will be prompted to search for a product.
5. Choose an accent color. This color will be applied throughout the entire action link flow.
6. Provide a display name for your action link. This will be displayed as the Company Name in the action link flow.
7. Add a label for the call to action. This label will be used for buttons and primary CTAs in the action link flow.
8. Assign a name to your action link. This name is used for reporting purposes and is not displayed to the end-user.

​

Add button code

Add the provided HTML code from your Vendr representative on your website or application wherever you want the button to appear.

<script src="https://js.vendr.com/v1/vendr-link.js">
</script>

<vendr-button 
    data-config-id="7e6017fc-d7eb-4688-a254-a4921f3ca29d" 
    data-company-id="d31e2ffe-7eba-4672-8e5b-9b10c0fb58d5" 
    data-product-id="22eb0e24-f7e3-4524-9d60-b52325e234b8" />

import "@vendr-org/connect-sdk/style.css";
import { VendrButton } from "@vendr-org/connect-sdk"

<VendrButton 
  configId="7e6017fc-d7eb-4688-a254-a4921f3ca29d" 
  companyId="d31e2ffe-7eba-4672-8e5b-9b10c0fb58d5" 
  productId="22eb0e24-f7e3-4524-9d60-b52325e234b8" />

​

Add card code

Add the provided HTML code from your Vendr representative on your website or application wherever you want the card to appear.

<script src="https://js.vendr.com/v1/vendr-link.js">
</script>

<vendr-card 
    data-config-id="7e6017fc-d7eb-4688-a254-a4921f3ca29d" 
    data-company-id="d31e2ffe-7eba-4672-8e5b-9b10c0fb58d5" 
    data-product-id="22eb0e24-f7e3-4524-9d60-b52325e234b8" />

import "@vendr-org/connect-sdk/style.css";
import { VendrCard } from "@vendr-org/connect-sdk"

<VendrCard 
  configId="7e6017fc-d7eb-4688-a254-a4921f3ca29d" 
  companyId="d31e2ffe-7eba-4672-8e5b-9b10c0fb58d5" 
  productId="22eb0e24-f7e3-4524-9d60-b52325e234b8" />

Note: data-company-id/companyId is required if not set on the action link configuration. If not provided, the company on the action link will be used. If data-product-id/productId is provided, then data-company-id/companyId is also required.

​

Test the flow

By default your action link is set to test mode. This allows you to test the end-to-end-flow in a sandbox environment. Once you’re ready to push your action link to production you can simply disable test mode and your action link will now be active.

You can click the Vendr Button below to see a live example.

You can click the Vendr Card below to see a live example.