A material configurator in your website

So you've created a beautiful viewer link in the Maverick Excelsior editor. Maybe something like this ring with a heart-shaped stone where customers can switch between ruby, emerald, or diamond, and pick their favorite gold type. Pretty neat, right?

https://maverickexcelsior.com/viewer/?w=omoq-rx9SJi

This link works great for sending to clients via WhatsApp or sharing on social media. But what if you want to embed the configurator directly into your website?

Good news: It's really simple.

The Easy Way: Drop in an iframe

All you need is this bit of code:

<iframe
  src="https://maverickexcelsior.com/iframe/?w=omoq-rx9SJi"
  width="100%"
  style="aspect-ratio: 4/3;"
  frameborder="0"
  allowfullscreen>
</iframe>

Just replace the ?w=xxxxxxxxxxx short-code by the one in the viewer link you created.

That's it. The iframe is just another component in your page, like an image or a video. You can place it wherever you want: next to your pricing table, below the product description, or in a modal popup. Whatever works for your design.

Want to see it in action? Check out our gallery page where we use exactly this approach for the material configurator demo.

Or right here!

The Fancy Way: Full control

Now, if you want something more sophisticated: where the material buttons are part of your website's design, or when someone clicks "Diamond" it updates the price automatically, that sort of thing... You'll need to roll up your sleeves a bit.

Take a look at our catalog mockup to see what's possible when you integrate more deeply. The material options there trigger events, update text... The whole nine yards.

For this level of integration, you'll need some basic JavaScript skills. We've documented everything in our embedding guide. It's not rocket science, but you'll be writing some code.

Quick tip

If you're using a website builder like Wix, Squarespace, or WordPress, the iframe method is your friend. Most of these platforms have an "HTML embed" or "Code block" component where you can just paste the iframe code and call it a day.

Oh! And the same can be said of e-commerce platforms like Shopify!

Happy configuring!