> ## Documentation Index > Fetch the complete documentation index at: https://docs.coze.cn/llms.txt > Use this file to discover all available pages before exploring further. 本文介绍如何安装并使用扣子 Card SDK，开发者可以参考本文档自定义智能体对话消息中的卡片效果。 ## 功能简介 {#b509274e} 为了助力开发者打造更具个性化与交互性的消息展示体验，扣子提供 Card SDK。借助该 SDK，开发者可以灵活地定义卡片的结构和内容，并将渲染后的卡片集成到你自行实现的聊天应用中。卡片是一种特殊的消息展示方式，它以结构化的布局和丰富的视觉元素呈现信息。与传统的纯文本消息相比，卡片可以包含图片、按钮、列表等多种元素，使得信息更加直观、易读。这不仅显著提升了用户体验，还提高了信息传递效率，增强了交互性。 ## 效果预览 {#5efadaff} ![Image=400x355](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/efe1e35df664419ab425cea205221abd~tplv-goo7wpa0wc-image.image) ## 功能简介 {#08bd7843} | | | \ |**功能** |**说明** | |---|---| | | | \ |自定义内容格式 |Card SDK 提供了强大的自定义功能，允许开发者根据具体需求定义卡片的布局和内容。开发者可以通过配置卡片的 DSL（Domain Specific Language，领域特定语言）数据，指定卡片中各个元素的类型、样式和交互逻辑。无论是简单的文本卡片，还是包含图片、按钮和列表的复杂卡片，都可以通过Card SDK 轻松实现。 | | | | \ |自定义卡片样式 |Card SDK 还允许开发者自定义卡片中按钮、图片等组件的渲染逻辑，实现个性化的样式和交互效果。通过 `customComponentMap` 接口，开发者可以为每个组件定义独特的渲染函数，从而实现更加丰富的视觉效果和交互行为。开发者可以根据具体的业务需求，设计出个性化的卡片样式。 | ## 浏览器兼容性 {#783bdba5} Card SDK 的运行环境要求如下表所示。 | | | | \ |**操作系统** |**浏览器** |**版本限制** | |---|---|---| | | | | \ |PC |Chrome | 87.0 及以上 | |^^| | | \ | |Edge | 100.0 及以上 | |^^| | | \ | |Safari | 14.0 及以上 | |^^| | | \ | |Firefox | 79.0 及以上 | | | | | \ |Android |Chrome | 100.0 及以上 | |^^| | | \ | |Edge | 100.0 及以上 | | | | | \ |iOS |\ | |Chrome | 87.0 及以上 | |^^| | | \ | |Safari | 14.0 及以上 | ## 配置流程 {#9e92dbac} ### 步骤一：发布智能体 {#2c5fef61} 在智能体的发布页面，选择 Chat SDK，并单击**发布**。发布的详细流程可参考[发布到 Chat SDK](/guides/publish_agent_to_chat_sdk)。 ### 步骤二：安装 Card SDK {#37fdb1a4} 创建一个新的 HTML 页面，并将以下代码添加到的