Add it to your website

Paste two lines of HTML to put a catalog on any page, or link to the hosted catalog and parts portal. Your key only works on the websites listed on your account.

Embed a catalog#

Copy the code for a catalog from Overview in the console, or use this with your key and the catalog’s name:

<script type="module" src="https://assemblyatlas.com/packages/embed/assembly-atlas.js"></script>
<assembly-atlas key="aa_live_…" catalog="deck-60" server="https://assemblyatlas.com"
  style="display:block;height:640px"></assembly-atlas>

The script goes on the page once, however many catalogs are on it. The catalog takes the width of wherever you put it; set the height with style (600–800px works well on desktop). On narrow screens the parts list moves below the model.

Attributes#

Platform notes#

• Shopify: add a Custom Liquid section or block where the catalog should go and paste the code. See Add to cart → Shopify.
• WordPress / WooCommerce: a Custom HTML block.
• BigCommerce: Page Builder’s HTML widget.
• Squarespace, Wix, Webflow: their Code or Embed block. If the editor’s preview doesn’t show the catalog, check the published page.

Link to a part#

Every part has Copy link. On your site the link ends in #part= and the part number, and the catalog opens with that part picked out:

https://yourcompany.com/parts/deck-60#part=AS1-1001

Add a serial number with #serial=W1500-1201&part=AS1-1001. Use these in service bulletins, emails and QR code labels on the machine itself.

Send a customer their parts#

For your parts desk and support team: Part links in the console. Pick the catalog, the customer’s serial number and the parts they need, with quantities, and send the link. It opens the 3D catalog on their machine with those parts already in their parts request (or a signed-in dealer’s order), at your prices and stock, ready to send or add to the cart. Copy email text writes the email for you, and there’s a QR code to print or show on a call.

Links carry part numbers only, as add=AS1-1001:2 (after ? on the hosted catalog, or after # on your own page). Prices, names and stock always come from your catalog and price list, so a link can’t change a price.

Hosted pages#

If a catalog isn’t on your site yet, or you want a link to send, Assembly Atlas hosts each one. All of these are on Overview in the console.

The parts portal#

The parts portal is every live catalog in one place, grouped by product line. Its search covers every part number in every catalog and shows which models use each part (“which models use AS1-002?”). Dealers sign in here to see their prices.

To make it the “Parts” page of your own site, put it in an iframe:

<iframe src="https://assemblyatlas.com/portal/?key=aa_live_…"
  style="width:100%;height:900px;border:0" title="Parts"></iframe>

Which websites it works on#

Your key works on the websites listed on Overview, plus Assembly Atlas’s own hosted pages. An entry like yourcompany.com also covers www.yourcompany.com; *.yourcompany.com covers every subdomain. Local addresses (localhost) work for development.

When a page on another address tries your key, it’s turned away and listed under Sites that used this key. To add a site (a new store, a staging site, a Shopify myshopify.com address), email us and we’ll allow it.

For developers: events#

The <assembly-atlas> element fires DOM events you can listen for:

const atlas = document.querySelector('assembly-atlas');
atlas.addEventListener('atlas-request', (e) => {
  // e.g. send it to your analytics
  gtag('event', 'parts_request', { catalog: e.detail.catalog, parts: e.detail.lines.length });
});