Customize look and feel

​

Standard Customization

From the action link page you can customize the following settings to brand your action link to match the look and and feel of your app.

• Accent color: This color will be applied as the primary color in the action flow UI.
• Display name: Typically your company name. This will be displayed as the Company Name in the action link flow.
• Call to action label: This label will be used for buttons and primary CTAs in the action link flow

​

Advanced Customization

Want to customize your Action Link even more? You can also customize the appearance of the UI components using standard CSS styles. By leveraging CSS, you can integrate Vendr’s UI components into your application’s design while maintaining a consistent and intuitive user experience. Set CSS properties like fontFamily and text-color to broadly customize components appearing in your Vendr Link.

Vendr components expose class hooks for key elements, allowing you to style them directly with CSS. The layout of the UI component stays consistent, but you can modify colors, fonts, borders, padding, and more.

​

Applying your custom CSS

1. Under the Action Link setting, select advanced.
2. Copy and paste your CSS styles into the text box.
3. Save your action link.

Your custom styles will be pushed to any pages for the specific action link you applied the custom css style on.

​

Supported Button CSS Props

/* Button Base Styles */
.vendr-button {
  text-color: #ffffff; 
  background-color: #007bff; 
  border: 2px solid #007bff; 
  border-radius: 8px; 
  padding: 14px 28px; 
  font-size: 16px; 
  font-weight: 600;
  width: 200px; 
  height: 50px; 
}

/* Hover State */
.vendr-button:hover {
  background-color: #0056b3; 
  text-color: #f8f9fa; 
}

​

Supported Card CSS Props