Hi, in this article, we will show you step by step on how to add your own custom styling when you integrate our drop-in pricing component into your website or application. 

Assuming that you have already finished embedding the pricing component in your website, we will jump right into how you could apply your own styling to match your website's styling.

Getting Started:

  1. Create an SCSS or CSS file in your project and name it ServiceBotPricing.css
  2. Link the newly created stylesheet in your website.

    <link href="./project/CSS/ServiceBotPricing.css" rel="stylesheet"/>

  3. Copy an empty SCSS or CSS structured for the Pricing component HTML, or you can use one of our styling examples to make it even quicker to start.

    CodePen Pricing Style Empty
    CodePen Pricing Style Example 1
    CodePen Pricing Style Example 2
    CodePet Pricing Style Example 3 (With checkout form styling)
    CodePen Pricing Style Example 1
    CodePen Pricing Style Example 2
  4. Paste it into your newly created stylesheet.
  5. You can now start developing your own custom style in the SCSS or CSS structure in your own project.
  6. If you want to style the Checkout form that appears when you pick a pricing tier, check this article


The easiest way to start styling your own pricing component embed is to Fork the example Pen and edit away.

Once you've achieved an acceptable style in your forked Pen, you can then copy and paste the SCSS or CSS into your website's stylesheet.

If you do not use SCSS on your website, and want an easy way to convert the Pen into CSS to use on your site, you can use this SCSS online tool. 

You can also style the checkout page that loads after the pricing page.

 Checkout the example above.

Did this answer your question?