Page Comparison

...

1. Create a container div with an ID.

   Code Block
   <div id="EXAMPLE-ID"></div>

2. Import the script into your page. This script should be at the end of the body tag.

   Code Block
   <script src="AUTOSYNC_API_URL/js/Autosync.js"></script>

3. Call the AutosyncVisualizer constructor. You must provide the API key and the container ID. Use object notation to provide the following values.

   • Required:

     • id – The ID of the container

     • key – The API key provided for you in the portal

   • Optional:

     • scrollBar – Show or hide the visualizer’s scroll bar; by default it's set to false

     • productSegment- Show only the interface for one product’s segment, it can be an array with more or a string for only one option, this are the valid values:

       • tires - Allows a tire’s brand page and a interface to see each tire by it self

       • wheels - Allows a wheel’s brand page and a interface to see each wheel by it self

       • accessories - Allows a accessory’s brand page and a interface to see each accessory by it self

       • vehicles - Allows the VOV (View on vehicle) Images for each of the others segments. Important: This segment can’t be set alone, must be set with other segment

     • startPage - Use a segment page as home page. This are the valid values:

       • vehicles - It will use the Make’s page as home page

       • wheels - It will use the Wheel’s brands page as home page

       • tires - It will use the Tire’s brands page as home page

       • Any URL Path used on the visualizer - It should be an URL Path that already is available on the visualizer for example:

         Code Block
         language none
         /vehicles/Jeep /vehicles/2023/Jeep/Gladiator /tires/brands /wheels/brands . . . etc

         IMPORTANT: Only paths that are already working on your visualizer can be configured here. If a Path that doesn’t exists is gave then the visualizer will not work properly.

...