InteractiveSchematics Basics

UPLOADING YOUR FILES: If you already have existing schematics or parts diagrams, convert them into a .SVG (scalable vector graphic) format. We’ll import your .SVG file into the InteractiveSchematics application and create clickable areas around each part, part identifier or other area related to a part or assembly. You’ll also provide a .CSV (comma separated values) file containing a parts list related to that schematic.

CREATING PRODUCTS AND ASSEMBLIES: Once uploaded, the digitized schematic and parts list are linked to the appropriate product or assembly with just a few clicks. These products or assemblies – now linked to the schematic and parts list – are bundled into an embeddable that’s ready to be placed on top of your customer portal, ERP or other legacy system – no system upgrades required.

BRANDING YOUR EMBEDDABLE: These embeddables can be branded, filtered and configured with a customized call-to-action such as adding to a shopping cart, opening a product page, viewing part specs, filing warranty claims or other functions.

HOW TO DIGITIZE: Digitizing your schematics is a two-step process. First, generate an .SVG (scalable vector graphic)of your schematic with clickable areas using any composer or .SVG file editor. Second, create a spreadsheet in .CSV format listing the parts and any other relevant information you want in the application, such as SKU, name, location, quantity or other custom fields. If you are unfamiliar with how to create a heat mapped SVG file, contact us to request a How To guide using a free SVG editor.

WHAT’S AN ITEM? Everything in InteractiveSchematics – products, assemblies, parts, SKUs and more – are referred to as “items”. There are three primary item types:

• Products: These are the top of the item hierarchy. A product can contain many assemblies and parts. 

• Assemblies: An assembly is something that is part of a larger item (product) but also contains its own set of items (parts). An assembly can also stand on its own as an item if it is purchasable and has its own item details.

• Parts: A part is the smallest individual unit contained within a product or assembly.

Adding A Schematic

Once you have created your products, you can add your schematic. To add a schematic:

1. Click on “View Details” for the product.

2. Click on the yellow circle with three dots on the upper left of the details page.

3. Browse and upload your .SVG schematic file. 

4. Then browse and upload your .CSV parts list.

5. Click “Next” and you’ll be prompted to add column identifiers, then click “Next” to finish uploading your parts list.

6. The next screen will display your schematic and parts list. Simply click each part and the associated item on your parts list to link them. 

7. Click “Save”. You’ll return to the Product screen, where you’ll see your first schematic and the associated bill of materials.

Create and Configuring the Embeddable

After you’ve created all of your products and loaded your schematics, you can create your first embeddable. This embeddable can be used to incorporate your schematic into a host application such as a customer portal, ERP or other legacy system. 

1. Return to your dashboard and click on the “Org Admin” button in the lower left of the screen. 

2. Click on “Organization Apps”.

3. In the “App” dropdown, select “InteractiveSchematics”. This will take you to a screen where you can create multiple embeddable applications called “Organization App Instances”. 

4. You can customize your embeddable by:

• Selecting your brand colors

• Creating custom calls-to-action such as adding to cart or opening a product detail page

• Filtering products

• Creating custom fields

• Displaying or hiding attributes

5. Click “Save” and the application will generate a copyable snippet of code that can be added to your host application.

Deploying the Embeddable Into a Host Application

To deploy the embeddable into your host application, copy the embeddable code snippet that you generated in the steps above in the “Organization Apps” screen in the “Org Admin” section. 

1. Under “Organization App Instances” select the type of adapter you wish to use, then click on the icon to copy the copiable snippet. 

2. Navigate to your host application - such as a website or customer portal - and paste the code snippet.