Керування кількома User Profiles

​

Використання Панелі керування

​

Створення нового профілю

​

Перемикання на новий профіль

​

Отримання Profile Key

​

Запросити члена команди

​

Статус члена команди

​

Члени команди звертаються до підтримки

​

Реактивація призупиненого User Profile

​

Причина призупинення

1. Пошукайте у своїй скриньці за RefId призупиненого User Profile
2. Тема електронного листа чітко вкаже, що відбулося призупинення

​

Реактивація призупиненого User Profile

1. Увійшовши в Панель керування і перейшовши на сторінку User Profiles.
2. Знайдіть призупинені User Profiles, клацнувши вкладку “Suspended” або шукаючи за RefId User Profile, який включено в електронний лист.
3. Зніміть призупинення з User Profile, клацнувши кнопку “Unsuspended”.
4. Перегляньте та прийміть сертифікацію відповідності.

​

Керування активними User Profiles

​

White-Label сторінки Connect Accounts

• Додайте або видаліть логотип Вашої компанії та встановіть його висоту.
• Оберіть, які соціальні мережі Ваші користувачі можуть під’єднувати.
• Встановіть мову сторінки.
• Показуйте власні посилання допомоги або приховайте посилання Ayrshare.
• Встановіть верхній та підзаголовки для кожного User Profile (наприклад, ім’я або бізнес клієнта).
• Керуйте перенаправленням кнопки Close назад у Ваш додаток.
• Налаштуйте модальні вікна Instagram та Telegram з Вашим власним HTML.

• Застосуйте користувацький CSS-файл для керування кольорами, шрифтами та тим, які функції відображаються, використовуючи задокументовані class hooks для зміни стилю самих кнопок підключення.
• Пофарбуйте діалогові вікна прив’язки — селектори сторінок, форми облікових даних та підтвердження — так, щоб вони відповідали Вашій сторінці.
• Встановіть власний заголовок сторінки, текст кнопки Close та favicon.
• Додайте користувацький текст або HTML у footer.

​

Налаштування

​

Відео-демонстрація параметрів кастомізації сторінки зв’язування

​

Обмеження доступу до User Profile

​

Обмеження доступу до Primary Profile

​

Обмеження доступу члена команди

​

Оновлення логотипу на сторінці соціального зв’язування

​

Встановлення доступу до соціальних мереж

​

Встановлення мови для соціального зв’язування

• Англійська
• Арабська
• Китайська (спрощена)
• Французька
• Німецька
• Італійська
• Японська
• Португальська
• Іспанська

• Переклад повідомлень про помилки API
• Переклад допису

​

Відображення локації сторінки

​

Видимість посилань допомоги

​

Альтернативні електронні адреси для сповіщень

​

Instagram Login

​

Прямий Instagram Login vs автентифікація Facebook Page

​

Обмеження функцій з прямим Instagram Login

• Brand/User Data - Не можна отримати інформацію про обліковий запис Instagram через кінцеві точки brand.
• Пошук хештегів - Не можна шукати хештеги в Instagram.
• Співпраця - Не можна запрошувати співавторів до дописів Instagram.
• Позначення локації - Не можна додавати теги локації до дописів Instagram.
• idId- Legacy Instagram User ID - поле не повертається для соціальної аналітики Instagram.

​

Який метод вибрати?

• Увімкніть Прямий Instagram Login, якщо Вам потрібна лише базова функція публікації, і Вам не потрібні розширені функції, перелічені вище.
• Вимкніть Прямий Instagram Login (використовуйте автентифікацію 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 для комірки, що містить одну картку. Див. Change the Card Layout.
• Правила, які працюють лише на flex-елементі: z-index, order, align-self, flex. Їх найважче помітити, тому що селектор усе ще відповідає, а оголошення все ще валідне — воно просто не має ефекту. На старішій сторінці Ваш логотип, заголовок, блок інструкцій та кнопка Close були прямими нащадками .main-content, який Ваша таблиця стилів робила flex-контейнером, тож кожен з них був flex-елементом. Flex-елемент шанує z-index навіть без position і шанує order та align-self. На перебудованій сторінці ці четверо сидять усередині обгорток, тож вони більше не є flex-елементами, і всі чотири властивості перестають до них застосовуватися. Симптом зазвичай — щось зникає, а не рухається. z-index на Вашому логотипі, наприклад, — це те, що раніше піднімало його над фіксованою смугою заголовка, намальованою через .main-content::before — без нього смуга малюється прямо поверх логотипа, і логотип виглядає так, ніби його зовсім немає, хоча він завантажився коректно і має правильний розмір. Два способи виправлення, будь-який підходить:
  /* 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

​

Текст footer

​

Функції Enterprise

​

Max Pack

​

Автоматична повторна синхронізація сторінок Facebook та Instagram

• Опція “Resync” доступна при під’єднанні сторінок Facebook або Instagram.
• Увімкнувши цю функцію, всі раніше під’єднані сторінки автоматично будуть переприв’язані до user profile.
• Примітка: Тільки раніше пов’язані сторінки будуть перез’єднані; нові сторінки не будуть автоматично додані.
• Ця функція підтримує облікові записи Facebook з до 400 сторінок.
• Для облікових записів, що перевищують 400 сторінок, рекомендується розподіляти сторінки між кількома обліковими записами Facebook.
• Найкраща практика: Використовуйте опцію “Resync” лише за необхідності, щоб перез’єднати всі сторінки. Для рутинних операцій це зазвичай не потрібно.

​

Білий список IP

​

Технічні перевірки та перевірки безпеки

​

Виділене керування обліковим записом з пріоритетною підтримкою

​

Користувацькі кінцеві точки API