Integration Theme - Embed DriveWorks On Your Website

Where would we be without the Internet? No seriously, I can’t imagine what it’s like to not have it because I’ve grown up in this Internet age. It’s easy to take it for granted and not think about life without it. So when I go onto a site like Nike and configure my new running shoes, that’s all I’ve ever known. Putting aside how much I love my new shoes, there’s a lot of power in being able to give your users an interactive experience. One of the great features of DriveWorks is the web capability. You’ve been able to put your configurator on a website for a while now, but if you wanted to incorporate it into your exact site, it required using the old school iFrame. DriveWorks recognized the need to have a fully integrated website experience and came out with the DriveWorks Live Integration Theme with DriveWorks 17.

What is the Integration Theme?

The DriveWorks Integration Theme is a way of making sure your users have a seamless experience when interacting with your website. Essentially, your user can interact with the project without knowing it. This is great for a couple of reasons. The first is that everything is integrated into a single website. Nobody wants to have to leave your website to order a product from your company. That’s a tough user experience and likely would lead to frustration.

Another reason using the integration theme is a great idea is that you can allow your website to interact with the DriveWorks project. Your web team has worked very hard to create a branded website for your company. Now, you can use their buttons, their labels, and their lists to pass information to the configurator. Additionally, you can use the CSS to control how information is presented in your DriveWorks projects. The new property called (Metadata) can apply and parse a list of CSS classes. By using the integration theme, your DriveWorks projects become tightly woven into the framework of your website.

Having a connected user experience is a goal of any business. A good website visit can lead to another, and another. Eventually, you create a loyal customer that comes back to you time and time again.

How does it work? – XML

Now this all sounds really cool. When I first heard about it, I was skeptical about how hard it would be to set up. But the truth is, it isn’t very difficult to use at all. The integration theme works by using XML to control what project and group is available to the website. One cool feature of using the integration theme is that you aren’t limited to a single group. You can actually have multiple groups available for your users! Of course, this doesn’t make sense for every business, but the option is there for you. Additionally, DriveWorks is much more open than you would expect with the Integration Theme.

The XML file also controls which constants and variables can be controlled using your website. I mentioned it earlier, but by opening up the project, you can pull information directly from your website. If you have users logging into a portal, you can automatically pull that information into the forms. Imagine being a user and configuring a product that’s already customized to match my preset preferences! So now we know how the project is controlled, but how is it shown?

How does it work? – HTML

The DriveWorks Live Integration Theme uses a second key component to display the project – an HTML file. However, this isn’t an HTML file that you start from scratch. In fact, the file is simply your HTML file currently used by the website. Relatively speaking, you simply add a few lines of code to display DriveWorks.

“Add a few lines of code”? You’re exaggerating!

When I say a few lines of code, I’m not exaggerating at all. The first time I set up the Integration Theme, I used 29 lines of code on an HTML page that was over 1500 total lines. However, the overall needed lines of code is much lower. The majority of the code is used to define constants and variables that I could reuse later. I’ll be honest, I’m not a web developer by any stretch. My knowledge of HTML isn’t amazing, but I generally understand what’s going on. Trust me, if I can figure this out, then you certainly can too.

Tie a bow around it

There is a lot of power behind the Integration Theme. You can have very simple examples, where the configurator is just dropped into a slot on your web page. On the opposite side of the spectrum is the Nike example from earlier. No matter where you are today, using the DriveWorks Live Integration Theme can help improve your users’ experience every time they visit your website.

~Nick