Webview API

The Webview API allows you to fetch and render ArisifyPlus Product Options data directly on your storefront, custom theme, or embedded widget.

This is useful when you want to display product options in a custom frontend instead of relying only on the default app block.

Use this API when you want to:

• Render product options in a custom storefront section
• Build a custom product page layout
• Display options inside a custom widget or iframe
• Connect ArisifyPlus Product Options with a headless or customized frontend experience

For browser or storefront integration, please use a Webview Token.

The Webview Token is designed for frontend use. It can be exposed in the browser as long as your store domain is added to the token whitelist.

Important: Do not use an API Token starting with apo_api_ in browser code. API Tokens are intended for server-side integrations only.

https://public-api.avisplus.io

We recommend passing the token through the Authorization header:

Authorization: Bearer <your_webview_token>

Example:

Authorization: Bearer apo_wv_xxxxx

For iframe or webview cases where custom headers are difficult to send, you may also pass the token through a query parameter:

?token=<your_webview_token>

Before calling the Webview API from your storefront, make sure your store domain is added to the token whitelist.

The API will validate the request origin or referrer. If the domain is not whitelisted, the request will be rejected.

Example domains you may need to whitelist:

your-store.myshopify.com
your-custom-domain.com

Use this endpoint to get option sets assigned to a Shopify product.

GET /api/public/v1/option-sets?product_id=<shopify_product_id>

Example request:

const APO_WEBVIEW_TOKEN = "apo_wv_your_token_here";
const productId = "{{ product.id }}"; // Shopify Liquid

async function loadOptionSets(productId) {
  const response = await fetch(
    `https://public-api.avisplus.io/api/public/v1/option-sets?product_id=${productId}`,
    {
      headers: {
        Authorization: `Bearer ${APO_WEBVIEW_TOKEN}`,
      },
    }
  );

  if (!response.ok) {
    throw new Error(`API error: ${response.status}`);
  }

  return response.json();
}

loadOptionSets(productId)
  .then((data) => {
    console.log("Option sets:", data);
  })
  .catch((error) => {
    console.error("Failed to load option sets:", error);
  });

You do not need to pass the shop domain in this request. The system will detect the shop from the Webview Token.

You can also use the Webview endpoint to render the ready-made Webview HTML.

GET /api/public/v1/webview

Example:

GET https://public-api.avisplus.io/api/public/v1/webview
Authorization: Bearer apo_wv_xxxxx

The response returns the Webview HTML and automatically injects the verified access token into:

window.ACCESS_TOKEN

This allows the Webview page to continue calling related APIs after the token is verified.

The Webview API supports up to:

600 requests / minute

If your storefront receives a 429 error, please apply backoff and retry logic.

Example:

async function fetchWithRetry(url, options, retries = 3) {
  for (let i = 0; i < retries; i++) {
    const response = await fetch(url, options);

    if (response.status !== 429) {
      return response;
    }

    await new Promise((resolve) => setTimeout(resolve, 1000 * (i + 1)));
  }

  throw new Error("Too many requests. Please try again later.");
}

• Use the Webview Token only for frontend integrations.
• Add all storefront domains to the token whitelist before going live.
• Use the Authorization header whenever possible.
• Only use the ?token= query parameter for iframe or webview cases where headers are not available.
• Do not expose server-side API Tokens in your storefront code.
• Avoid calling the API repeatedly on every small UI change. Cache the option set data on the page when possible.

<div id="avisplus-options"></div>

<script>
  const APO_WEBVIEW_TOKEN = "apo_wv_your_token_here";
  const productId = "{{ product.id }}";

  async function initAvisPlusOptions() {
    const response = await fetch(
      `https://public-api.avisplus.io/api/public/v1/option-sets?product_id=${productId}`,
      {
        headers: {
          Authorization: `Bearer ${APO_WEBVIEW_TOKEN}`,
        },
      }
    );

    if (!response.ok) {
      console.error("Failed to load AvisPlus option sets");
      return;
    }

    const data = await response.json();

    const container = document.getElementById("avisplus-options");
    container.innerHTML = "<pre>" + JSON.stringify(data, null, 2) + "</pre>";
  }

  initAvisPlusOptions();
</script>

The same Webview Token can be used with public API endpoints under:

/api/public/v1/*

Common endpoints include:

/api/public/v1/option-sets
/api/public/v1/option-sets/:id
/api/public/v1/settings
/api/public/v1/localizations

For server-side integrations, use an API Token instead of a Webview Token.