@comparaonline/co-banner NPM

Bricks | ComparaOnline banner

This library contains ComparaOnline banner.

Installation

You can install it using:

npm

npm install @comparaonline/co-banner

yarn

yarn add @comparaonline/co-banner

or the package manager of your choice

If you are not using a package manager you could simply include a script tag (index.mjs for ECMAScript module system or index.js for CommonJS)

<script type="module" src="https://bricks-staging.comparaonline.com/co-banner/index.mjs"></script>

Usage

Simple example, simple banner and with recommended offers:

import { useEffect } from 'react';
import COBanner from '@comparaonline/co-banner/react';
import '@comparaonline/co-banner/css';
import './App.css';

export function App() {
  useEffect(() => {
    (async () => {
      const brick = new COBanner({});
      // Or if you want to display recommended offers
      // const brick = new COBanner({
      // recommended: { basePrice: '18000', fullPrice: '36000', premiumPrice: '68000' },
      // });
      brick.init('banner');
    })();
  }, []);

  return <section id="banner" />;
}

You can also simply use COBanner component:

import { COBanner } from '@comparaonline/co-banner/react';

export function App() {
  return <COBanner {...coBannerConfig} />;
}

COBanner instance (or component) accepts a configuration object that has this structure:

export type COBannerConfig = {
  company?: string;
  lang?: Language;
  styles?: Styles;
  recommended?: {
    basePrice: string;
    fullPrice: string;
    premiumPrice: string;
  };
  onClick?: MouseEventHandler<HTMLElement>;
  buttonText?: string;
  title?: ReactElement;
  className?: string;
  children?: ReactElement;
};

styles let you define the theme, also its primaryColor, while lang let you pick between spanish(es) and portuguese(pt). recommended let you set an object with base prices for different car insurance coverages. company lets you set your business name, its useful if you'd like having the quote page with your logo.