管理多个用户配置

​

使用 Dashboard

​

创建新的配置

​

切换到新配置

​

获取 Profile Key

​

邀请团队成员

​

团队成员状态

​

团队成员联系支持

​

重新启用被暂停的用户配置

​

暂停原因

1. 使用被暂停用户配置的 RefId 搜索你的收件箱
2. 邮件主题会明确指出发生了暂停

​

重新启用被暂停的用户配置

1. 登录 Dashboard 并前往 User Profiles 页面。
2. 通过点击 “Suspended” 标签或使用邮件中的用户配置 RefId 进行搜索，找到被暂停的用户配置。
3. 点击 “Unsuspended” 按钮解除暂停。
4. 查看并接受合规声明。

​

管理活跃的用户配置

​

白标化关联账户页面

• 添加或移除你的公司 logo，并设置其高度。
• 选择用户可以连接哪些社交网络。
• 设置页面语言。
• 显示你自己的帮助链接，或隐藏 Ayrshare 的帮助链接。
• 为每个用户配置设置主标题和副标题（例如客户的姓名或业务名称）。
• 控制 Close 按钮跳转回你的应用。
• 使用你自己的 HTML 自定义 Instagram 和 Telegram 弹窗。

• 应用自定义 CSS 文件，控制颜色、字体以及展示哪些功能，并使用已记录的类名钩子对连接按钮本身重新设置样式。
• 为关联对话框着色 —— 页面选择器、凭据表单和确认框 —— 使其与你的页面相匹配。
• 设置你自己的页面标题、Close 按钮文本和 favicon。
• 添加自定义页脚文本或 HTML。

​

设置

​

关联页面自定义选项视频演示

​

限制用户配置访问

​

限制 Primary Profile 访问

​

限制团队成员访问

​

更新社交关联页面上的 Logo

​

设置社交网络访问

​

设置社交关联页面的语言

• 英语
• 阿拉伯语
• 简体中文
• 法语
• 德语
• 意大利语
• 日语
• 葡萄牙语
• 西班牙语

• 翻译 API 错误信息响应
• 翻译帖子

​

显示页面位置

​

帮助链接可见性

​

用于提醒的备用邮箱

​

Instagram 登录

​

直接 Instagram 登录 vs Facebook Page 认证

​

直接 Instagram 登录下的功能限制

• 品牌/用户数据 —— 无法通过 brand 接口检索 Instagram 账户信息。
• 话题标签搜索 —— 无法在 Instagram 上搜索话题标签。
• 协作 —— 无法邀请协作者到 Instagram 帖子。
• 位置标签 —— 无法为 Instagram 帖子添加位置标签。
• idId- 旧版 Instagram User ID —— Instagram 社交分析中不再返回该字段。

​

应该选择哪种方式？

• 启用直接 Instagram 登录 —— 如果你只需要基础的发帖功能，并且不需要上述高级功能。
• 禁用直接 Instagram 登录（使用 Facebook Page 认证） —— 如果你需要使用 Instagram 的全部功能，包括话题标签搜索、协作、位置标注或品牌数据获取。

​

自定义弹窗

<div>
  <span class="underline">
    Everyone agrees that
    <a target="_blank" href="https://www.ayrshare.com">Ayrshare Rocks!</a>
  </span>
</div>

span.underline {
  color: blue;
  text-decoration: underline;
}
span.underline a {
  color: blue;
  text-decoration: none;
}

​

使用 API

​

创建和管理配置

​

获取 Profile Key

​

启用消息功能

​

Max Pack 自定义

​

自定义 CSS

​

CSS Class Hooks

.social-linking-page-column {
  max-width: none !important;
}

.social-account-icon {
  width: 24px !important;
  height: 24px !important;
}
.social-account-icon :is(svg, img) {
  width: 21px !important;
  height: 21px !important;
}

.social-account-card {
  --ayr-pill-bg: #1b3a2b;
  --ayr-pill-fg: #79bd96;
}

<div class="main-content">
  <div class="social-linking-page-column">
    <div class="social-linking-header">
      <div><img class="company-logo" /></div>
      <div>
        <h1 class="heading-social-accounts">…</h1>
        <div class="additional-info additional-info__body">…</div>
      </div>
    </div>
    <div class="social-accounts-grid">
      <div class="social-account-card-wrapper">
        <div>
          <!-- unnamed clickable wrapper, always the full width of the cell -->
          <div class="social-account-card unlinked-card" data-platform="tiktok">
            <div>
              <div class="social-account-icon">…</div>
              <div>
                <p class="social-account-name">TikTok</p>
                <p class="click-to-link">…</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      …
    </div>
    <div><button class="close-button">…</button></div>
  </div>
</div>

.social-linking-page-column {
  display: flex !important;
  flex-direction: column !important;
}
.social-linking-header {
  display: contents !important;
}
/* Your logo, the instruction block and the Close button each sit inside a
   further wrapper that has no name of its own. Flatten those too, or `order`
   below has nothing to compare. */
.social-linking-header > div,
.social-linking-page-column > div:has(> .close-button) {
  display: contents !important;
}

.company-logo {
  order: 0 !important;
}
.social-accounts-grid {
  order: 1 !important;
}
.close-button {
  order: 2 !important;
}
.additional-info {
  order: 3 !important;
}

​

Linking Dialog Colors

:root {
  --ayr-dialog-backdrop: rgba(10, 10, 10, 0.66);
  --ayr-dialog-bg: #161616;
  --ayr-dialog-fg: #e7eae6;
  --ayr-dialog-muted-fg: #9aa0a6;
  --ayr-dialog-border: #262626;
  --ayr-dialog-radius: 22px;
  --ayr-dialog-accent: #79bd96;
  --ayr-dialog-input-bg: #0f0f0f;
  --ayr-dialog-input-fg: #e7eae6;
  --ayr-dialog-input-border: #3a3a3a;
}

​

Updating an Older Stylesheet

• 页面自动生成的类名。 你可能从浏览器开发者工具中复制过一些类名（例如以 chakra- 开头的），它们属于页面所用的框架，而不属于公开契约。这些类名已经不存在，也没有对应的替代项。请依据上表中的选择器重写规则。
• 裸的元素或属性选择器，例如 div > div 或 button[type="button"]。页面结构不是契约且已发生变更，因此从 .main-content 逐层向下计数的规则现在命中的元素与之前不同。这是布局规则表面上没有效果、或产生非预期效果的最常见原因。
• 依靠元素位置去定位卡片网格的规则。 在网格和单元格还没有名字之前，触达它们的唯一方式就是从 .main-content 逐层向下计数，使用形如 .main-content > div、.main-content > div > div、.main-content > div > div > div 或 .main-content > div:not(.additional-info) 的规则。这些规则仍会匹配到某些元素，因此很容易被忽略：.main-content 依然存在，但一张卡片如今位于其下方五层，因此每条规则都会偏离目标一两层。原本瞄准网格的规则可能落到承载页面标题的包裹层上，原本瞄准单个卡片的规则可能一次性把所有卡片都调整了尺寸。请用现在为此提供的两个名称来替换它们：网格用 .social-accounts-grid，承载单个卡片的单元格用 .social-account-card-wrapper。参见改变卡片布局。
• 只对 flex 项目生效的规则：z-index、order、align-self、flex。 这些规则最难被发现，因为选择器仍能匹配、声明本身也合法——只是不产生任何效果。在旧版页面上，你的 Logo、标题、说明区块和 Close 按钮都是 .main-content 的直接子元素，而你的样式表将 .main-content 设为 flex 容器，所以它们各自都是 flex 项目。flex 项目即便没有 position 也会遵循 z-index，同时也会遵循 order 和 align-self。而在重构后的页面上，这四个元素都置于包裹层内部，因此它们不再是 flex 项目，上述四个属性对它们也随之全部失效。 症状通常是元素凭空消失，而不是位置改变。例如，Logo 上的 z-index 原本用于把它抬升到通过 .main-content::before 绘制的固定顶栏之上——一旦失效，顶栏就会直接盖在 Logo 上，Logo 看起来像是完全不见了，尽管它其实已正常加载、尺寸也正确。 两种修复方式，任选其一即可：
  /* 1. Give the element a position, so z-index applies on its own. */
  .company-logo {
    position: relative;
    z-index: 2;
  }
  
  /* 2. Or flatten the wrappers, which makes these elements flex items again
        and restores z-index, order and align-self together. This is the same
        recipe as Change the order of the page, above. */
  .social-linking-page-column {
    display: flex !important;
    flex-direction: column !important;
  }
  .social-linking-header {
    display: contents !important;
  }
  .social-linking-header > div,
  .social-linking-page-column > div:has(> .close-button) {
    display: contents !important;
  }
  
• .linked-tag。 旧版页面将其加在已连接卡片的状态徽标上。它不属于上述契约，这是有意为之：已连接的卡片如今也可能显示 “Relink required” 或 “Identity check”，因此隐藏 .linked-tag 的规则会一并隐藏用户需要处理的警告。如果你的样式表隐藏 .linked-tag 并自行绘制替代徽标，替代徽标将不会出现。请改为对 .connected-card 本身设置样式，并保留这些状态徽标可见。

​

Target a Single Network

.social-account-card[data-platform="tiktok"] {
  /* ... */
}

​

Change the Card Layout

• .social-accounts-grid 是网格本身。它是一个可换行的 flex 行，卡片之间的间距由其 gap 决定。使用它可以调整间距，或完全替换布局方式。
• .social-account-card-wrapper 是承载单个卡片的单元格。其 width 决定每行能放下多少张卡片，页面会按不同屏幕尺寸设置该宽度。

.social-accounts-grid {
  gap: 24px !important;
}

.social-account-card-wrapper {
  width: 100% !important;
}

.social-accounts-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 16px !important;
}

.social-accounts-grid .social-account-card-wrapper {
  width: auto !important;
}

​

Example: Hide the Page Heading

h1.heading-social-accounts {
  display: none !important;
}

​

Example: Restyle Unconnected Cards as Buttons

/* Unconnected cards become outlined buttons. */
.social-account-card.unlinked-card {
  background-color: #ffffff !important;
  border-color: #4f46e5 !important;
  border-width: 2px !important;
  border-radius: 8px !important;
}

/* An !important rule also wins over the page's own hover styles,
   so restate the hover state you want. */
.social-account-card.unlinked-card:hover {
  background-color: #eef2ff !important;
  border-color: #4338ca !important;
}

/* The muted call to action becomes the button label. */
.social-account-card.unlinked-card .click-to-link {
  color: #4f46e5 !important;
  font-weight: 600 !important;
}

.social-account-card.unlinked-card {
  background-color: #4f46e5 !important;
  border-color: #4f46e5 !important;
}

.social-account-card.unlinked-card p {
  color: #ffffff !important;
}

​

修改页面标题、Close 按钮和 Favicon

​

页脚文本

​

企业版功能

​

Max Pack

​

自动重新同步 Facebook 和 Instagram Pages

• 连接 Facebook 或 Instagram Page 时会出现 “Resync” 选项。
• 启用该功能后，此前已连接的所有 Page 都会被自动重新关联到该用户配置。
• 注意：仅会重新连接此前已关联的 Page；新的 Page 不会被自动添加。
• 该功能支持最多 400 个 Page 的 Facebook 账户。
• 对于超过 400 个 Page 的账户，建议将 Page 分散到多个 Facebook 账户中。
• 最佳实践： 仅在确实需要重连所有 Page 时才使用 “Resync” 选项。日常操作中通常无需使用。

​

IP 白名单

​

技术与安全评审

​

专属客户经理与优先支持

​

定制 API 接口