Help Center/ MetaStudio/ FAQs/ Intelligent Interaction/ Does MetaStudio Support Rich Media?
Updated on 2025-08-22 GMT+08:00

Does MetaStudio Support Rich Media?

Supported Rich Media Formats

The Q&A with virtual avatars supports the following rich media formats:

  • Image: JPG, PNG, BMP, GIF, and SVG
  • Video: MP4

Importing Rich Media Files

Rich media files can be imported through the Q&A knowledge base. See the example in Table 1.

If you use the default style of the SDK provided by MetaStudio, you need to submit a service ticket to add the domain name of the image or video link to the whitelist to comply with the content security policy (CSP) of the browser.
Table 1 Q&A knowledge base

No.

Question

Answer

1

How do I claim coupons?

  • Example image: <img src="https:///test.example.com/AI-POC/3/QR code for claiming coupons.jpg" />
  • Example video: <video src="https:///test.example.com/AI-POC/3/QR code for claiming coupons.mp4" ></video>

Rich Media Display (Default Style of the SDK)

You can use the default style of the SDK for rich media display on the page for intelligent interaction with virtual avatars.

The field enableCaption in the following two methods of the intelligent interaction client SDK defaults to False, indicating customized rich media display. To use the default style of the SDK, change the value of enableCaption to true.

  • Modify config of the parameter param in the method create. That is, change the value of enableCaption to true.
    await HwICSUiSdk.create({
        serverAddress: 'serverAddress',
        robotId: 'robotId',
        onceCode: 'onceCode',
        containerId: 'containerId',
        config: {
          enableCaption: true
        }
      });
  • Change the value of enableCaption in the method setConfig to true.
    HwICSUiSdk.setConfig({
        enableCaption: true
      });

The following figure shows how the image imported in Table 1 is displayed on the intelligent interaction page when the default style of the SDK is used.

Figure 1 Default style of the SDK

Rich Media Display (Custom)

By default, you need to customize rich media display on the page for intelligent interaction with virtual avatars.

You can obtain the answer text through the registration event notification semanticRecognized. Then you can extract image and video tags for custom display.