Using Matador
      Back to home
      1. Help Center
      2. Using Matador

      How to integrate the Matador Integrated CTA widget into your website?

      Follow these simple steps: First, locate the section of your website where you want the widget to be displayed. It could be on your homepage, a specific inventory page, or any other relevant section.

      Step 1: Add the HTML Code 
      <div class="matador-widget" data-id="66be2b97ba28ea2e35191bfb"></div>
      Add the above HTML code to the place where you want the widget to be displayed on your website.
       
      Step 2: Add the Style Link 
      <link href="https://chat.matador.ai/widget/index.css" rel="stylesheet"></link>
      Include the style link in the <head> section of your website to ensure proper styling of the Matador widget.
       
      Step 3: Add the Script Link 
      <script src="https://chat.matador.ai/widget/index.js"></script>
      Add the script link in the <head> section of your website to enable the functionality of the Matador integrated CTA widget.
       
      Congratulations! You have successfully integrated the Matador Integrated CTA widget into your website. Visitors can now enjoy the convenience of engaging with the Matador widgets.
       
      The Matador Integrated CTA widget can automatically detect vehicle details from your website. It reads attributes like VIN, make, model, year, stock, and mileage from the parent elements on your page using standard data tags. This allows the widget to pass vehicle information directly into conversations without the need for manual input.
       
      You can pass vehicle properties to the integrated CTA. A vehicle of interest will be created in the conversation based on these properties.
      • data-mileage - The mileage of the vehicle.
      • data-stock - The stock number of the vehicle.
      • data-model - The model of the vehicle.
      • data-year - The year of the vehicle.
      • data-make - The make of the vehicle.
      • data-vin - The VIN (Vehicle Identification Number) of the vehicle.
       
      Example: 
      <div className="matador-widget" 
          data-id="66be2b97ba28ea2e35191bfb" 
          data-mileage="MILEAGE" 
          data-stock="STOCK" 
          data-model="MODEL" 
          data-year="YEAR" 
          data-make="MAKE" 
          data-vin="VIN">
        </div>
       
      If you have any questions or encounter any issues during the integration process, please contact our support team at support@matador.ai. We're here to help!