Kivicube Docs

English

简体中文

Appearance

Playground ​

Web Plugin ​

Open Scene Playground

Open Collection Playground

The playground is an online environment for trying the Kivicube iframe plugin. You can choose an API example, enter the required parameters, edit the source code, and preview the result immediately. It is a convenient way to validate integration ideas, test parameters, and get familiar with advanced API usage.

How to Use ​

After opening the page, you can follow this flow:

  1. Select Scene or Collection at the top right.
  2. Choose the API you want to test from the left panel.
  3. Enter the Scene ID or Collection ID you want to use at the top, or keep the default official values.
  4. Write or edit the code you want to run in the editor.
  5. Click Run in the top right to start the preview and verify the result.

Top Bar Parameters ​

  • Scene mode requires a Scene ID.
  • Collection mode requires a Collection ID.
  • In Collection mode, Scene ID is optional. If you leave it empty, the sample enters a scene using its default behavior.

If these placeholders are kept in the source code:

  • __PLAYGROUND_SCENE_ID__
  • __PLAYGROUND_COLLECTION_ID__
  • __PLAYGROUND_COLLECTION_SCENE_ID__

they will automatically use the values entered in the top bar. You can also replace them with fixed IDs of your own if you want to repeatedly test the same scene or collection.

Editing and Preview ​

  • The left panel lets you switch between API examples.
  • The center editor lets you directly edit HTML / JS / CSS.
  • The right panel is the preview window for the current code.
  • Run reloads the preview with the current code.
  • Close closes the current preview.
  • When Live Preview is enabled, the preview refreshes automatically whenever you edit the code.

Common Features ​

  • Auto Save Drafts: Automatically saves your edited draft code in localStorage, so it is still there after a page refresh. If you clear browser storage, the draft is removed permanently.
  • Reset: Restores the current example to the original official source code.
  • Download button: Downloads the current example source code.
  • Copy button: Copies the current example source code.

Tips ​

  • Start by finding the API you want to integrate or test in the left panel, then review the sample code and run it once before making changes.
  • If a sample writes output to console, open your browser developer tools and check the Console tab.
  • When testing different APIs, make sure you are in the correct mode first: use Scene for scene-level capabilities and Collection for collection-level capabilities.