# 基于Web SDK定制文本框
基于Web SDK定制文本框前，需要先集成Web SDK前端，详见[Web SDK文档](https://support.huaweicloud.com/api-metastudio/metastudio_08_0008.html)。而不是使用控制台发布生成的链接和激活码，通过演示链接的方式打开智能交互的页面。
图1集成流程   
![](https://support.huaweicloud.com/api-metastudio/zh-cn_image_0000002424741942.png)
流程说明：
- F1：通过调用Web SDK的[setConfig](https://support.huaweicloud.com/api-metastudio/metastudio_08_0010.html#section15)接口，将enableCaption字段设置为false，隐藏Web SDK自带的文本框，方便后面自定义一个文本框。
- F2：租户在Web上定义一个文本框，大小和位置都可以自定义。
- F3：[设置事件回调](https://support.huaweicloud.com/api-metastudio/metastudio_08_0010.html#section1)，用于Web SDK上报交互的问题和答案文本。问题文本由[speechRecognized](https://support.huaweicloud.com/api-metastudio/metastudio_08_0011.html#section9)事件上报，答案文本由[semanticRecognized](https://support.huaweicloud.com/api-metastudio/metastudio_08_0011.html#section10)上报**。**
- F4：当智能交互发生后，ASR识别到的问题，通过F3中设置的事件回调接口上报给Web端。
- F5：当智能交互发生后，第三方大模型返回的答案，通过F3中设置的事件回调接口上报给Web端。
- F6：Web解析出F4和F5中上报的问题及答案文本，在F2定制的文本框中显示。