Embeddable placemenets designed to seamlessly integrate with your SaaS platform and empower conversions into annuals.

With just a few lines of code, you can easily embed pricing badges, top banners, and pop-up modals that align perfectly with your brand identity. Our JS library ensures that your website maintains a consistent branding experience, reinforcing your messaging and effectively communicating pricing information.

Table of content

• Top banner
• Pricing & Plans page
• Pop up
  • Sales-led (Contact Sales)
  • Product-led (Annual only)
  • Product-led (monthly and annual)
• Checkout page

1. Top banner

It’s recommended to embed Comfi offer on your homepage’s top banner to increase awareness on flexible annual offering.

<aside> 💡 User Flow By clicking on the top banner the customer is suggested be re-directed to either book an appointment with your sales team or to your pricing page.

</aside>

Depending on your current offerings, select a corresponding top banner embeddable component:

Top-banner code

1. Import the JS library and styles

<link rel="stylesheet" href="<https://unpkg.com/comfi-badges@latest/css/comfi-badges.css>" />
<script defer type="module" src="<https://unpkg.com/comfi-badges@latest/js/comfi-badges.js>"></script>

1. Embed the element into your code

window.ComfiBanner({
	id: 'header', // parent div's id
	style: 2, // style of the element, 1 for black bg and 2 for green bg
	discount: 20, // the discount on an annual plan
	redirectUrl: "" // specify the redirect url on click 
});