Integrate with Your Business Channels

Integrate your scenes into your website, Shopify store, or WeChat Mini Program so users can easily discover and experience your creations through familiar channels. Whether you're expanding your business, showcasing products, or sharing creative content, integration helps you reach more users, boost engagement, and create more opportunities for interaction and conversion.

For more advanced development options, click here.

Choose the integration method that fits your needs and follow the tutorial to complete the setup.

Get the Integration Code

You can access Developer & Integration in two ways:

• Option 1: Open the target scene, click Settings in the top-right corner, and select Integrate with Your App.

• Option 2: Go to Scenes, find the target scene, and click Developer & Integration below the scene card.

On the integration page, select your desired channel and click Copy Code to get the integration code.

Shopify Integration

Integrate Kivicube experiences into your Shopify store so visitors can launch Live Try-On or Live Interaction directly from your store pages.

The following steps cover basic integration. For more advanced integration options, click here to learn more.

Step 1: Copy the Integration Code

Copy the complete integration code for Shopify.

Step 2: Open the Shopify Theme Code Editor

1. Log in to your Shopify admin and go to Online Store > Themes.

2. Find your current theme and click More actions ( ... ) on the right.

3. Select Edit code.

Step 3: Add the Integration Code

1. In the file list on the left, find the layout folder and open theme.liquid.

2. Locate the closing </body> tag at the end of the file.

3. Paste the complete integration code before the </body> tag. Keep the existing code and closing tag intact. Do not overwrite or remove other content.

4. Click Save.

Step 4: Test the Experience

Open your Shopify store and check that the experience entry appears correctly. Click it to make sure the experience opens as expected. Follow the on-screen instructions to grant camera access and complete a test session.

Note

• We recommend duplicating your current theme as a backup before editing its code, so you can restore it if anything goes wrong.

• Adding the code to theme.liquid typically displays the experience entry on pages that use this layout. To show it only on specific pages, adjust the code placement based on your theme structure.

• If you're not familiar with theme code, we recommend asking a developer to help with the integration.

Web Integration

Embed Kivicube experiences into your website so visitors can access Live Try-On or Live Interaction without leaving the current page.

Step 1: Copy the Integration Code

Copy the full web integration code.

Step 2: Add the Code to Your Website

Log in to your website's admin dashboard and find a place to add custom HTML code. Paste the copied code there.

If your website allows you to edit the page source, you can also add the code to the relevant HTML page. We recommend placing it before the closing </body> tag.

Step 3: Save and Publish

Save the code and publish your website. To use the experience on multiple pages, you can add the code to the relevant shared page templates, depending on your website structure.

Step 4: Test the Experience

Open your published website and check that the experience entry appears correctly. Click it to make sure the experience panel opens as expected. Follow the on-screen instructions to grant camera access and complete a test session.

Note

The steps for adding code may vary across website platforms. If you're using Shopify or a Mini Program, refer to the relevant integration guide.

Tip

The button appears in the bottom-right corner by default. To customize its style or position, click here for detailed configuration instructions.

Mini Program Integration

Embed your scene experiences in a WeChat Mini Program so users can open and interact with your creations directly within the Mini Program.

Step 1: Configure the Business Domain

Log in to the WeChat Mini Program Admin Console. Add the following domain under Business Domain and complete the required verification.

www.kivicube.com

Step 2: Copy the Integration Code

Copy the integration code for the Mini Program.

Step 3: Add the Code to a Mini Program Page

In your WeChat Mini Program project, open the page where you want to display the experience. Paste the copied code into the corresponding WXML file.

The code uses the web-view component to open the scene's experience page. Keep the full code intact and make sure the scene URL is included.

Step 4: Open the Page and Test the Experience

Navigate to the configured page within your Mini Program and check that the experience loads correctly. Follow the on-screen instructions to grant camera access, then test the Live Try-On or Live Interaction effects.

Note

Make sure the business domain is configured and verified, and that the Mini Program page loads the experience correctly.

Tip

The button appears in the bottom-right corner by default. To customize its style or position, click here for detailed configuration instructions.