This second level of integration allows you to integrate your 3D product catalog powered by the TraceParts platform directly into your website thanks to an HTML tag called “iframe”.

In this case, certain features available on the TraceParts platform, such as the 3D viewer, will be immediately visible from your own website.

The users of your products can then download your CAD files without leaving your site.

Integrate the TraceParts technology directly into your website

With this second solution, TraceParts provides you with an HTML code to integrate in your website. The HTML code contains two lines where you only need to change a value depending on the information you want to display. Here are some examples of content integration using the HTML code:

Integrate the 3D viewer and CAD download at a part number level

By using the following code, you enable your visitors to view and to download CAD models.

<script id="tp-pi-inijs" src="https://api.traceparts.com/tp-pi-loader.js" tp-pi-url="https://api.traceparts.com/"></script>
<div id="tp-parts-injector" partnumber="ACME01" els-id="elsid" style="height: 430px; width: 700px;"></div>

partnumber: value of the part number as it is exactly stored in the TraceParts database.
els-id: ID of your EasyLink Solution.
data-language: ID of the language to force the language of the user interface.
height: height of the frame. Even if the page adopts a responsive design, the optimized display is with 430 pixels.
width: width of the frame. Even if the page adopts a responsive design, the optimized display is with 700 pixels.

Your TraceParts account manager will provide you with the technical content needed.

By integrating this HTML code into your website you will obtain a result similar to this one.

Integrate the configuration, the 3D viewer and CAD download at a product series level

By using the following code, you enable your visitors to configure, view and download CAD models

<script id="tp-pi-inijs" src="https://api.traceparts.com/tp-pi-loader.js" tp-pi-url="https://api.traceparts.com/"></script>
<div id="tp-parts-injector" product="TracePartsPartFamilyCode" els-id="elsid" data-configurator-type="grid" style="height: 430px; width: 1000px;"></div>

product: ID of the TraceParts product page.
els-id: ID of your EasyLink Solution.
data-language: ID of the language to force the language of the user interface.
data-configurator-type: display the configurator with the default display (value=”table”) or with drop lists (value=”grid”).
data-show-bom-fields: set to “true”, it displays the Bill Of Materials.
data-show-rfq: set to “true”, it displays the “Request For Quotation” form, when the option is available on the catalog or a link to the eShop if the current product configuration provides the hyperlink.
data-show-slides: to display the slides containing the 3D viewer (value=”3Dviewer”), the product picture (value=”Picture”), the dimensional drawing(s) (value=”DimensionalDrawings”) or the electronics footprint and symbol (value=”ECAD”). The display is related to the availability of the information. Each slide to display is listed in a string with a comma as separator (i.e.: 3Dviewer,DimensionalDrawings).
data-manual-refresh: with value=”true”, the 3D preview is not automatically refreshed after a change in the configuration. A refresh button is available.
height: height of the frame. Even if the page adopts a responsive design, the optimized display is with 430 pixels.
width: width of the frame. Even if the page adopts a responsive design, the optimized display is with 1,000 pixels.

Your TraceParts account manager will provide you with the technical content needed.

By integrating this line of code into your website you will obtain a result similar to this one.