Skip to main content

Plug and Play

Vyking Plug and Play Solution​

Overview​

Our Plug & Play solution allows your customers to virtually try on sneakers using their mobile devices. This document will guide you through the process of embedding our VTO experience into your website.

Experience our live demo: Plug&Play VTO Demo

Prerequisites​

Before you begin, ensure that you have:

  • Access to your website's HTML code.
  • Your unique product SKU(s) and corresponding product page URLs.

Steps for Integration​

  1. Embedding the Placeholder.
    First, you need to add a placeholder div where you want the "Try them on" option to appear on your product page. Replace:
  • CLIENT_ID with unique client id, provided by Vyking.
  • YOUR_SKU with the specific SKU of the product.
  • YOUR_PRODUCT_PAGE_URL with the URL of the product page.
<!-- Vyking VTO integration. Button -->
<div
  class="vyking-vto-experience"
  data-id="CLIENT_ID"
  data-sku="YOUR_SKU"
  data-backurl="YOUR_PRODUCT_PAGE_URL"
></div>

<!-- Vyking "View in 360" integration. Button -->
<div
  class="vyking-360-experience"
  data-id="CLIENT_ID"
  data-sku="YOUR_SKU"
  data-backurl="YOUR_PRODUCT_PAGE_URL"
></div>
  1. Adding the Integration Script.
    Next, include our integration script within the <body> tag of your webpage. This script will automatically detect the user's device and display the appropriate VTO experience.
<script src="https://viewer.vyking.app/embed/vyking-vto-viewer.js"></script>

User Interaction​

On Desktop: Users will see a "Try them on" prompt. Clicking this will open a popup displaying a QR code. Scanning this QR code with a mobile device will open the VTO experience for the specified SKU.

On Mobile: Clicking the "Try them on" prompt will directly redirect users to the VTO experience for the specified SKU.

Support​

For any inquiries or technical assistance, please contact our support team at support@vyking.io.

FAQ​

Q: Can I use the same integration code for multiple products?
A: Yes, you can reuse the integration code. Just make sure to update the data-sku and data-backurl attributes for each product.

Q: Is there any performance impact on my website?
A: The integration is designed to be lightweight and should not significantly impact your website's performance.

Q: What if I need advanced customization?
A: For advanced customization options, please reach out to our team. We're here to help tailor the experience to your specific needs.

Last updated on by Vitalii Rozhkov