可视化卡片平台提供动态化、场景化的内容策略配置能力，通过低代码方式搭建卡片组件，可快速拖拽生成卡片，绑定产品信息、行情数据，信息可对接智能体或企业API实现动态更新，支持APP、H5智能体等多平台渲染。本文为您介绍如何创建卡片以及卡片编辑器的使用方法。

• 卡片组件化搭建：​自由画布的拖拽式布局设计，提供文本、图表、金融产品组件等多样化的组件库，将智能体回复的产品、分析数据等内容，以可视化、可交互的动态卡片进行回复。
• 卡片动态数据源：​支持对接企业自有数据源API，动态展示数据内容。
• 多平台跨端支持：​H5能力支持卡片在APP、智能体对话web页面等多平台统一渲染。

• 查询条件：可按不同的条件筛选查询卡片列表，包括名称/ID搜索、卡片场景、卡片状态、资源组、创建人、创建时间
• 卡片列表：当前登录账号有权限查看到的所有卡片列表内容

前提条件 #

您已注入了所需的数据源，具体操作请参见数据源。

新建卡片 #

1. 登录GMP控制台，在顶部导航栏选择内容中心>卡片管理。
   

2. 点击新建卡片，填写卡片名称，选择卡片场景，然后点击新建。
   

   参数	参数说明
   卡片名称	自定义卡片名称
   卡片场景	对于卡片进行使用场景的分类
   所属资源组	用于设置不同用户角色的资源组权限，支持自定义资源组，或者按企业部门组织架构来管理各部门的卡片权限
   卡片描述	选填，对于卡片内容、应用场景等进行详细描述
   定时生成图片	选填，开启后支持根据数据源定时生成卡片图片

3. 进入卡片编辑页面。通过各类组件、素材和图层，可以绘制相关的卡片。具体操作可参见页面组件教程。
   

   目前支持以下组件：

   基础
   数字	支持自定义数字的展示，包括格式、颜色、交互动作、数据源、动画等。	
   富文本	支持富文本内容、位置、大小、颜色等。	
   按钮	点击出现多种交互,如跳转链接、打开弹窗	
   图片	支持上传图片，多用于页面背景。支持设置图片的动画效果、发光效果、数据源。	
   文字	支持自由编辑文字，包括内容、数据源、排版、动画、字号、颜色等。	
   矩形形状	支持设置矩形形状的背景、颜色、边框等。	
   图表类
   自由图表	支持将数据渲染成各类图表。点击编辑图标，可选择各类图表和配色模板来绘制。
   折线图	支持绑定数据源，将数据渲染成折线图。支持设置折线图的各类颜色、背景、动画。
   柱状图	支持绑定数据源，将数据渲染成柱状图。支持设置折线图的各类颜色、背景、动画。
   容器类
   数据列表（横向）	选择数据源，将数据源以横向方式展示数据列表
   数据列表（纵向）	选择数据源，将数据源以纵向方式展示数据列表
   其他
   产业链图	直接绘制产业链组件的内容，支持设置宽度、背景。

4. 设置完成后，可点击预览，查看效果。
   

5. 修改数据源注入，点击更新预览数据，查看卡片的效果是否符合预期。

6. 完成调优后，点击发布，再次填写确认卡片信息，点击确认发布。

7. 进入审批环节，填写审批的人和审批信息、附件，点击确定。待审批通过后，即可发布成功。
   

卡片审批 #

• 创建审批流程：在「营销配置-审批管理-流程管理」中创建审批流程，完成审批流程节点的配置
  

  

• 新建审批策略：在「营销配置-审批管理-策略管理」中新建审批策略，指定功能卡片管理，提交类型根据业务需要指定上线、下线；若涉及资源组权限，可指定某个资源组的审批流，若不指定则默认所有资源组都走该审批。
  
  

• 活动提交发布时，展示审批相关信息
  

• 提交审批后，列表展示审批状态。审批状态下不允许编辑活动、不允许重复提交审批，需完成当前审批后，才可以编辑和重新提交。

卡片渲染 #

卡片渲染接口 #

卡片可以通过 OpenAPI接口，获取渲染后的图片URL或者 H5 URL

渲染成图片

接口地址
域名用管理端域名
POST /magicapi/openapi/card/render
参数

{
    "token": "Token", // 请求Token, 联系火山引擎研发获取
    "orgId": "1",     // 集团Id，默认为 1
    "type": "image",  // image：图片，web：网页
    "id": "67f50d4acexxxx7aa57",  // 卡片Id
    // 注入的数据源
    "dataSource": {
        // 多个数据时，key 为数据源Id
        // 单个数据源时，key 可用 __ANY__ 代替
        // 值为注入的具体数据
        "__ANY__": [
            {
                "name": "xx指数",
                "now": "3429.76",
                "priceChangePct": "0.15"
            },
            {
                "name": "xx指数",
                "now": "11014.75",
                "priceChangePct": "0.52"
            },
            {
                "name": "xx板指",
                "now": "2228.64",
                "priceChangePct": "-0.61"
            }
        ]
    }
}

图片返回数据示例

{
    "code": 0,  // 0 为成功
    "data": {
        // 渲染完成的图片地址
        "url": "https://mymagic.com/minio.magic-bucket/1a5f16xxxx60e3b947"
    }
}

Web返回数据示例

{
    "code": 0,  // 0 为成功
    "data": {
        // 渲染完成的H5地址
        "url": "https://mymagic.com/magic/eco/card/release/67f50d4ace0c3a00xxxx7/68233ed6xxx9543a.html"
    }
}

智能体中使用 #

在智能体中，可使用卡片进行数据的可视化展示，业务的交互（需实现 H5 的展示 + 对接卡片事件）。
前置准备
按照业务场景搭建好卡片，提供卡片Id给智能体服务。卡片ID获取方式不一，一般是前置约定好获取的方式例如接口等。
卡片使用步骤

1. 智能体服务进行用户的意图识别，命中需要展示的卡片 —— 卡片Id
2. 智能体服务通过业务数据接口，查询到相关数据 —— 卡片注入数据
3. 智能体服务调用卡片渲染接口，传入数据获取图片Url/H5 Url
4. 智能体服务使用 Url 组织最终的 Markdown 格式的回复

卡片列表操作 #

编辑器的使用 #

顶栏区 #

组件区 #

画布区 #

配置区 #

图层和位置 #

• 堆叠： 类似搭积木的逻辑，一个积木一个积木搭上去，组件会一个个从上往下堆起来，这些组件搭起来的积木会撑起模块，通过右侧配置数值改变大小；
• 移动： 可以通过右侧数值改变位置和大小，也可以通过在画布区的拖拽自由移动位置、改变大小；

页面和模块 #

一个页面中可以配置多个模块，模块对于用户来说是无感知的，只是方便运营人员对页面的修改和管理。

复制/粘贴 #

锁定图层 #

支持对图层元素进行锁定/解锁操作：

1. 在图层面板，hover图层显示锁定icon，单击即可锁定/解锁；
2. 在画布区域，选中某个图层元素，鼠标右击即可在更多操作中锁定图层，或者键盘快捷键command+L进行锁定/解锁；
3. 图层锁定后，将无法调整其位置、大小和右侧面板的参数配置，需由操作人解锁后才可重新编辑修改。
   

组件教程 #

基础类 #

数字组件

• 支持自由编辑数字内容，包括字体、字号、字体颜色、加粗、下划线、倾斜、选项文本缩进、选项文本左对齐/居中/右对齐、选项上下对齐；

• 字体：目前为用户提供了丰富的字体以供使用（目前提供的字体均为第三方提供的开源字体）；

• 文字组件可实现多种基础交互动作：

  交互动作	示意图	详细说明
  跳转活动内页面		在同一个活动中存在多个页面，点击图片可跳转至任意页面。
  跳转链接		点击图片可以跳转至其他链接。
  打开弹窗		点击图片后在原页面弹出一个弹窗，需要配合「弹窗」组件使用。常见于抽奖兑换活动中，用来展示用户所得奖品
  关闭弹窗		点击图片后关闭弹窗。
  JS动作		可由研发人员定制开发对应的按钮动作代码，快速实现临时的定制开发需求，场景举例：APP端JSB能力调用、APP页面跳转等（注意：为了方便运营人员日常使用，建议二开动作，可直接增加动作类型）

• 支持对接自有数据源，动态展示数字内容

  • 选择数据源、字段，支持设置前缀、后缀
  • 支持开启「展示正号」、「区分正负数颜色」、「自定义颜色字段」进行更详细的样式设置

图片组件

• 支持对接自有数据源，动态展示图片内容
  

• 支持上传图片，多用于页面背景图；图片可实现多种基础交互动作。

  交互动作	示意图	详细说明
  跳转活动内页面		在同一个活动中存在多个页面，点击图片可跳转至任意页面。
  跳转链接		点击图片可以跳转至其他链接。
  打开弹窗		点击图片后在原页面弹出一个弹窗，需要配合「弹窗」组件使用。常见于抽奖兑换活动中，用来展示用户所得奖品
  关闭弹窗		点击图片后关闭弹窗。
  JS动作		可由研发人员定制开发对应的按钮动作代码，快速实现临时的定制开发需求，场景举例：APP端JSB能力调用、APP页面跳转等（注意：为了方便运营人员日常使用，建议二开动作，可直接增加动作类型）

• 其他常用配置：

  • 图层、位置大小：将图层模式设置为「移动」，拖拽即可移动位置，调整大小；也可以调整W/H、X/Y值调整位置和大小，调整圆角、透明度。
  • 内容设置：支持上传图片/选择其他图片素材，设置「加载中状态展示颜色」，开启「用户长按可保存」（常用于答题测评类活动，用户拿到测试结果后促使其分享至朋友圈），开启「用户双击放大预览」（常用于需要放大图片查看更多细节内容的场景，用户双击图片后，放大图片预览，可双指手势缩放查看，单击图片即可退出放大预览）。
  • 动画效果：增强页面动态交互体验，支持7种效果（心跳、果冻、橡胶、弹跳、摇晃、扭动、震动）
  • 发光效果：支持配置组件的发光效果，增强页面动态交互体验，支持3种效果（波浪、呼吸、流动）
    
    
    
    

文字组件

• 支持自由编辑文字，包括字体、字号、字体颜色、加粗、下划线、倾斜、选项文本缩进、选项文本左对齐/居中/右对齐、选项上下对齐；

• 字体：目前为用户提供了丰富的字体以供使用（目前提供的字体均为第三方提供的开源字体）；

• 支持对接自有数据源，动态展示文本内容
  

• 文字组件可实现多种基础交互动作。

  交互动作	示意图	详细说明
  跳转活动内页面		在同一个活动中存在多个页面，点击文字可跳转至任意页面，但不支持跳转到当前页面具体的某个组件位置。
  跳转链接		点击文字可以跳转至其他链接。
  打开弹窗		点击文字后在原页面弹出一个弹窗，需要配合「弹窗」组件使用。常见于抽奖兑换活动中，用来展示用户所得奖品
  关闭弹窗		点击文字后关闭弹窗。
  JS动作		可由研发人员定制开发对应的按钮动作代码，快速实现临时的定制开发需求，场景举例：APP端JSB能力调用、APP页面跳转等（注意：为了方便运营人员日常使用，建议二开动作，可直接增加动作类型）

• 动画效果：增强页面动态交互体验，支持7种效果（心跳、果冻、橡胶、弹跳、摇晃、扭动、震动）
  

矩形形状组件

支持更改颜色、圆角设置等，多用作文字背景图。

富文本组件

• 富文本是基础组件的一种，是编辑文字的一种工具。
• 在富文本设置栏内点击「编辑富文本内容」即可编辑文本内容，支持设置：字体，字号，加租，斜体，删除线，下划线，有序列表，无序列表，字间距，行间距，超链接，字体颜色，对齐。
• 使用场景：作为某个活动的规则页使用，添加规则内容在页面中。
  

按钮组件

• 按钮文本内容支持对接自有数据源，动态展示文本内容
  

• 点击按钮可实现多种基础交互动作。

  交互动作	示意图	详细说明
  跳转活动内页面		在同一个活动中存在多个页面，点击文字可跳转至任意页面，但不支持跳转到当前页面具体的某个组件位置。
  跳转链接		点击文字可以跳转至其他链接。
  打开弹窗		点击文字后在原页面弹出一个弹窗，需要配合「弹窗」组件使用。常见于抽奖兑换活动中，用来展示用户所得奖品
  关闭弹窗		点击文字后关闭弹窗。
  隐藏自己		点击按钮后隐藏当前按钮组件。
  JS动作		可由研发人员定制开发对应的按钮动作代码，快速实现临时的定制开发需求，场景举例：APP端JSB能力调用、APP页面跳转等（注意：为了方便运营人员日常使用，建议二开动作，可直接增加动作类型）

• 其他常用配置：

  • 图层、位置大小：将图层模式设置为「移动」，拖拽即可移动位置，调整大小；也可以调整W/H、X/Y值调整位置和大小，调整圆角、透明度。
  • 将图层模式设置为「固定」，可以实现按钮在屏幕的某个固定位置不动。
    
    

• 动画效果：增强页面动态交互体验，支持7种效果（心跳、果冻、橡胶、弹跳、摇晃、扭动、震动）

• 发光效果：支持配置组件的发光效果，增强页面动态交互体验，支持3种效果（波浪、呼吸、流动）
  
  

图表类 #

折线图

功能介绍
折线图图表形式，支持对接自有数据源，动态渲染图表数据。
配置流程

1. 添加「折线图」组件到页面模块中
2. 选中组件，可以在右侧面板对组件进行设置：
   1. 转为组件模板：支持转为组件模板，在后续搭建活动时复用
   2. 图层：支持设置堆叠或移动、组件透明度
   3. 位置大小：支持设置组件的宽、高、圆角、外边距
   4. 数据设置：支持设置X轴、Y轴的数据，静态数据可输入数据内容，动态数据需关联数据源
   5. 渲染设置：支持设置是否显示渲染动画、数据提示、坐标轴、折线平滑，以及设置数据点符号、线条宽度、坐标轴颜色和图形颜色
   6. 背景：用于设置组件背景图
   7. 边框：用于设置组件边框样式
      

柱状图

功能介绍
柱状图图表形式，支持对接自有数据源，动态渲染图表数据。
配置流程

1. 添加「柱状图」组件到页面模块中
2. 选中组件，可以在右侧面板对组件进行设置：
   1. 转为组件模板：支持转为组件模板，在后续搭建活动时复用
   2. 图层：支持设置堆叠或移动、组件透明度
   3. 位置大小：支持设置组件的宽、高、圆角、外边距
   4. 数据设置：支持设置X轴、Y轴的数据，静态数据可输入数据内容，动态数据需关联数据源
   5. 渲染设置：支持设置是否显示渲染动画、数据提示、坐标轴，以及设置柱子宽度、坐标轴颜色和图形颜色
   6. 背景：用于设置组件背景图
   7. 边框：用于设置组件边框样式
      

自由图表

功能介绍
柱状图、条形图、折线图、面积图、瀑布图、Mekko图、饼图、双轴图、词云、散点/气泡图、漏斗图、桑基图、雷达图、热力图、明细表的复杂图表形式，实现可视化编辑，支持对接自有数据源，动态渲染图表数据。
配置流程

1. 添加「自由图表」组件到页面模块中

2. 选中组件，可以在右侧面板对组件进行设置：

   1. 转为组件模板：支持转为组件模板，在后续搭建活动时复用
   2. 图层：支持设置堆叠或移动、组件透明度
   3. 位置大小：支持设置组件的宽、高、圆角、外边距
   4. 图表数据：静态数据可编辑图表数据，动态数据需关联数据源
   5. 背景：用于设置组件背景图
   6. 边框：用于设置组件边框样式
      

   

容器类 #

数据列表（横向）

功能介绍
横向数据列表展示形式，支持对接自有数据源，动态渲染图表数据。

配置流程

1. 添加「数据列表」组件到页面模块中
2. 选中组件，可以在右侧面板对组件进行设置：
   1. 转为组件模板：支持转为组件模板，在后续搭建活动时复用
   2. 图层：支持设置堆叠或移动、组件透明度
   3. 位置大小：支持设置组件的宽、高、圆角、外边距
   4. 列表数据：关联数据源和数据源字段
3. 在组件容器内添加文本、图片等组件，选中容器内的组件，可关联动态数据源和数据来源字段。
   

数据列表（纵向）

功能介绍
纵向数据列表展示形式，支持对接自有数据源，动态渲染图表数据。

配置流程

1. 添加「数据列表」组件到页面模块中

2. 选中组件，可以在右侧面板对组件进行设置：

   1. 转为组件模板：支持转为组件模板，在后续搭建活动时复用
   2. 图层：支持设置堆叠或移动、组件透明度
   3. 位置大小：支持设置组件的宽、高、圆角、外边距
   4. 列表数据：关联数据源和数据源字段

3. 在组件容器内添加文本、图片等组件，选中容器内的组件，可关联动态数据源和数据来源字段。

   
   
   

其他 #

产业链图

支持针对产业链中的上游、中游、下游数据内容绑定数据源，进行动态展示。