Custom Website Embed
You can easily add the RideStyler visualizer to your website by embedding it using the following steps:
1. Login to account.ridestyler.com and navigate to the Visualizer product dashboard (Marketing > Visualizer).
You need a paid subscription plan to access to the visualizer.
2. Under Embed the Visualizer, copy the Embed Code using the button or by highlighting the code snippet and manually copying it.
3. On your website, paste the code snippet into the body of the page where you would like the Visualizer to be displayed.
Squarespace
To add our visualizer to a site hosted on Squarespace, you will follow the steps above to get your embed code. However, once you have obtained the embed code, you will need to add a <code/> element to the page.
The video below provides an overview of how to add the visualizer to Squarespace.
Custom Styling
By default the visualizer will try to choose a size if there’s not one assigned to the container.
You can control the size as well as any other style attribute by modifying the visualizer with CSS. For example, to make the showcase fullscreen you could use the following CSS:
.ridestyler-showcase {
width: 100%;
height: 100%;
}Every element contained within the visualizer has a very specific class name. You can easily inspect the code on the page and add custom CSS to target each element within the visualizer.