How to embed Telivy's quote button

Example of implementation can be found here.

1. Load Telivy's Library

The easiest way to import Telivy's library to ensure no requests are hitting your server is to load quote-form.min.js and quote-form.min.css.
	

<head>
  <!-- other head elements -->
  <link 
    rel="stylesheet" 
    href="../quote-form@1.0.0/dist/quote-form.min.css">
  <script src="../quote-form@1.0.0/dist/quote-form.min.js">
  </script>
</head>

  

2. Set up HTML component

Add an empty <form> element with "createQuoteForm" id to the page you will like the embed the Quote button. The Telivy library will automatically inject the necessary elements into the page.
 

<body>
  <form id="createQuoteForm">
    <!-- Telivy will inject component and application behavior here -->
  </form>
</body>

 

3. Initialize Telivy with config

On page load, initialize the Telivy library by setting the API key, referring the source of leads (optional), and calling the initialize function. Telivy will handle the rest.
	

<script>

// Define API key and style
const config = {
  // Your API key (required)
  apiKey: "XYXY",
  // define the application source, defaults to 'external'
  utmSource: "your_channel",
  // should use the dev api url, defaults to false
  useDev: true,
  // customise the input class, default class is telivy-input
  inputClass: "quote-input",
  // customise the button class, default class is telivy-button
  buttonClass: "quote-button", 
}

// Initialize Telivy to render components
window.Telivy.initialize(config);

</script>

  

4. Style your elements (optional)

By specifying the custom classes in the config, it is easy to style the look of the input and button elements through CSS.
	

.telivy-input {
  width: 70%;
  color: $primary-color;
}

.telivy-button {
  width: 30%;
  color: $text-color;
  background-color: $primary-color;
}