The Ridestyler QuickViz is a bolt on product to your existing website making it easy for users to visualize product parts on a vehicle.
By specifying the vehicle configuration and which parts are available, QuickViz will show a corresponding element for viewing parts. The user can then easily see all viewable parts on your page, and by clicking the element will pop-up a modal displaying the part on their vehicle.
Custom Website Embed
You can easily add the RideStyler QuickViz visualizer to your existing website by following these steps:
1. Login to account.ridestyler.com and navigate to the QuickViz product dashboard (Marketing > QuickViz)
You need a paid subscription plan to access to the visualizer.
2. Under Embed the QuickViz, copy the embed code using the button or by highlighting the code snippet and copying it manually.
3. On your website, paste the code snippet into the body of the page.
4. You will need to replace the “–VEHICLE DESCRIPTION HERE–” text with the text description of the vehicle that was selected by the user.
The vehicle description must include at least the Make and Model.
If the description matches multiple vehicle images, the user will be prompted to choose which one they would like to use.
5. You will need to specify which buttons should trigger visualization by adding either the data-rsqv-partnumber or data-rsqv-itemnumber attribute.
- Use the
data-rsqv-partnumberattribute when you want to specify a manufacturer part number:data-rsqv-partnumber="109BZ-V187514408" - Use the
data-rsqv-itemnumberattribute when you have custom item numbers loaded for your account:data-rsqv-itemnumber="0972145"
See the example code below for an example of what the full button element might look like on your page.
These elements will be hidden by default and will be shown only after its determined that the associated product and vehicle can be rendered properly.
<button data-rsqv-partnumber="109BZ-V187514408">View on vehicle</button>
<button data-rsqv-itemnumber="0972145">View on vehicle</button>Custom Styling
Every element contained within the QuickViz modals have a very specific class name. You can easily inspect the code on the page and add custom CSS to target each element within the modals.
The QuickViz will only add an aside tag with two modal div’s inside it, which will not affect the styling of your page.