Web SDK Quickstart

Step-by-step instructions

Step 1: Publish web plugin script

Publish and download the web plugin script by following the steps below:

Go to web-plugin.twikit.com
Click the ‘Configure’ button next to your product folder.
Open the tab at the top bar that is called “Test Products”.
Publish your script by clicking the “Publish Live” button

More info about web plugin publishing can be found in this guide.

Step 2: Include web plugin script

Copy the script URL and place it in a script tag in your website’s HTML. Make sure that JQuery is included before this script.

HTML

<script src="https://sites.twikit.com/AutoDemo/production-2023-05-04-130914540/plugin-script.js"></script>

CODE

Step 3: Show the configurator

Add a canvas element and parameters div to your HTML and start the configurator in Javascript.

HTML

<div id="myCanvas"></div>
<div style="position:fixed; z-index: 1;" id="myParameters"></div>

CODE

JavaScript

window.addEventListener('DOMContentLoaded',function () {
    let productKey = 'wheel';
    let locale = 'default';
    let target = document.getElementById("myCanvas");
    
    let context = window.twikit.createContext(productKey, locale, target , {
        parametersReady: function(parameterContainer) {
            // Called when parameter HTML elements are ready.
            // 'parameterContainer' is a <div> element with parameter HTML elements contained in it.
            document.getElementById("myParameters").appendChild(parameterContainer);
        },
        previewBackgroundColor: '#ccc'  // Used to set the background color of the 3D canvas.
    });
});

CODE

All set

Now, you should be all set to further integrate the configurator in your website. Further reading:

Web SDK API documentation: Web SDK Reference

In case you encountered issues, please refer to the troubleshooting section at the bottom of this page.

Examples Javascript, Angular and React

The Twikit GitHub repository contains example projects to get you started quickly. Examples are available for Javascript, Angular and React.

https://github.com/Twikit

Troubleshooting

The Twikit development team is here to help in case of questions, bug reports or feature requests. Reach out to us: https://support.twikit.com