Three ways to integrate

There are three ways to put a Showcase on a website. In all three, the License key stays on a server and never reaches a visitor's browser. What changes is which server that is and who writes the code for it.

Embed code, WordPress plugin and Shopify app. For each one, which server holds the License key and what you set up.

• Embed code

  Visitor's browser

  Your own serverA route you writeHolds the License key

  Comnoira API

  You set up

  1. Paste the SDK snippet on your page.
  2. Write one server route that calls Comnoira.
  3. Add your domain to the Showcase in the Dashboard.

• WordPress plugin

  Visitor's browser

  Your WordPress site/wp-json/comnoira/v1/sessionHolds the License key

  Comnoira API

  You set up

  1. Paste the License key in Comnoira, Connection.
  2. Register the Showcase ID and publicKey.
  3. Add the Comnoira Showcase block to a page.
  4. Add your domain to the Showcase in the Dashboard.

• Shopify app

  Visitor's browser

  The Comnoira app server/apps/comnoira/exchangeHolds the License key

  Comnoira API

  You set up

  1. Paste the License key on the Connection page.
  2. Pick or enter the Showcase.
  3. Add the Comnoira Showcase block in the theme editor.
  4. Add your store domains to the Showcase in the Dashboard.

In all three, the License key stays on a server and never reaches the browser.

Embed code with your own server

You paste the SDK snippet on your page and write one route on your own server. Your server holds the License key, for example in an environment variable. The route calls Comnoira and returns the exchange code to the page.

This path fits a site you build yourself. Exchanging a session token shows the request, the answer and the errors. The Dashboard generates the snippet and a matching server route in Node.js, Python, PHP or Java.

You also add your website's domain to the Showcase's allowed domains in the Dashboard.

WordPress plugin

The plugin is called Comnoira 3D Viewer. It acts as your server: it stores the License key on your WordPress site, encrypted, and makes the Comnoira calls itself.

1. Install and activate the plugin.
2. Open Comnoira, then Connection, and paste your License key. The plugin saves it without checking it. The first Test Connection or page load verifies it.
3. Open Comnoira, then Showcases, and register a Showcase. Copy the Showcase ID and the publicKey from the Dashboard. The plugin labels the first one Embed ID. The plugin has no list to pick from, so you copy these once for each Showcase. Press Test Connection to check them.
4. Edit a page, add the Comnoira Showcase block and choose the registered Showcase. The block offers width, height and auto-rotate, and a field for advanced options as JSON.
5. Add your site's domain to the Showcase's allowed domains in the Dashboard.

The block writes only the Showcase ID and the publicKey into the page, so the page HTML holds no secret and no code. The plugin's loader starts the viewer when the block scrolls into view. It calls a route on your own WordPress site, /wp-json/comnoira/v1/session. That route answers only for Showcases registered in the plugin, adds your License key and asks Comnoira for the exchange code. The visitor's browser then completes the exchange with Comnoira, as in the embed code path.

The viewer follows the language your theme sets in the lang attribute of the page, so a Vietnamese page gets a Vietnamese viewer.

Shopify app

The app is called Comnoira 3D Viewer. Its server holds your License key, encrypted. Your store's pages call the app through a Shopify app proxy at /apps/comnoira/exchange.

1. Install the app on your store.
2. Open the Connection page of the app and paste your License key. Test connection reports whether Comnoira accepts it.
3. Open Showcases in the app and add a Showcase. The app lists the Showcases of your shop for you to pick from. If the list is unavailable, you can type the Showcase ID and the publicKey yourself.
4. In the theme editor, add the Comnoira Showcase block to a section and paste the Showcase ID. The block also has width, height, auto-rotate and an advanced options field. To show a different Showcase for each product, connect the Showcase ID field to a product metafield with the dynamic source button.
5. Add your store's domains to the Showcase's allowed domains in the Dashboard. Without them the viewer stays blank.

The block puts only the Showcase ID in the page. The app route checks that the Showcase is registered for your store, asks Comnoira for the exchange code with your License key, and returns the code together with the publicKey and Comnoira's addresses. It lists those fields one by one, so the License key cannot go along.

Who holds the License key

• Embed code: your own server. You write the route.
• WordPress: the WordPress server of your site, inside the plugin.
• Shopify: the server of the Comnoira app.

In each case, the allowed domains list in the Dashboard decides which websites may display the Showcase, and the browser exchange applies it.