Вызов пользовательского виджета из HTML

Как вызвать пользовательский виджет из HTML

Представьте себе три уровня. Скрипт подключения загружается. GSpeech для всего сайта. Виджет в Cloud Console — это определение проигрывателя (голос, интерфейс, селекторы, правила URL). Ссылка в вашем HTML — это пустой узел, где может отображаться этот проигрыватель.

• 1. Скрипт подключения — один раз для каждого сайта (Интеграции → HTML-сайт), обычно перед </body>.
• 2. Опубликованный виджет — Полная / Кнопка / Круг создаются или настраиваются вами в консоли.
• 3. Смонтировать в HTML - например <div class="my_listen_btn"></div>; Элемент рендеринга должен быть .my_listen_btn.
• Селектор содержимого — Целевой CSS-элемент для текста страницы, который будет озвучиваться (или оставьте пустым и используйте Content Text для автономного аудио).

Практическое правило: HTML никогда не «импортирует» виджет по имени. Соответствие элемента рендеринга + классу монтирования. is звонок.

Как писать идентификаторы (id), классы (class) и запятые (программистское образование не требуется)

Селектор содержимого, элемент рендеринга и список исключений используют один и тот же простой язык. Вам нужны всего два префикса — и тогда вы сможете... собирать устный контент по частям и вырезать мусор с исключением.

• id → # — в HTML id="article" → в GSpeech записывать #article (хеш + точный идентификатор).
• класс → . — в HTML class="post-content" → написать .post-content (точка + точный класс). Если у элемента несколько классов, достаточно одного соответствующего класса.
• Только метка — Подходят и просто названия на бирках: article, section, h1 (не # or .).
• Селектор содержимого + запятые — Собрать контент по частям в одном поле: #intro,.chapter-body,#summaryСовпадения считываются по порядку — это идеально, когда страница разделена на несколько отдельных блоков.
• Список исключений + запятые — Удалите шум из выделенной области, используя тот же синтаксис: #comments,.ads,.share-buttonsИсключения применяются в рамках данных, собранных селектором контента.
• Как найти значения — На странице с работающим кодом: щелкните правой кнопкой мыши по блоку → «Просмотреть код элемента». Найдите id="…" or class="…"затем наберите их с помощью # or . в консоли. Пошаговое руководство по использованию Deep Exclude: Исключить из списка и запретить высказывания.

Три варианта крепления по умолчанию против вашего собственного пользовательского виджета

В документации часто указываются три удобных класса монтирования, поскольку они поставляются в комплекте с настройками Cloud по умолчанию. Пользовательский виджет — это не другой продукт, это тот же тип «Полный» / «Кнопка» / «Круг», но с Отобразить элемент (и обычно ваш селектор содержимого).

• По умолчанию Полный - устанавливать <div class="gsp_full_player"></div> → Отобразить элемент .gsp_full_player.
• Кнопка по умолчанию - .gsp_button_player крепление + соответствующий элемент рендеринга.
• Круг по умолчанию - .gsp_circle_player крепление + соответствующий элемент рендеринга.
• Ваш индивидуальный звонок — любой класс или идентификатор, которым вы владеете (например) #promo-listen or .footer_tts) → установите именно этот селектор в качестве параметра «Отображать элемент» для опубликованного вами виджета.

Шорткоды WordPress ([gspeech] / button / circle) — это другой способ размещения записей. В чистом HTML-коде шорткода нет — есть только пара mount + Render Element. См. шорткоды по умолчанию Только для WP.

Комплексное решение: настройка и вызов вашего пользовательского виджета.

1. Создайте/откройте свой . в Облачная Консоль и подтвердить глобальные значения по умолчанию в Настройки (голос, язык) — см. Глобальные настройки против пользовательских.
2. Скопируйте HTML-сайт Скрипт подключения из раздела «Интеграции» и вставьте его один раз в свой общий шаблон. </body>. Разверните скрипт таким образом, чтобы он загружался на каждой странице, где требуется аудио.
3. Создайте Полный / Кнопка / Круг виджет (или откройте существующий пользовательский виджет). Дайте ему понятное имя, чтобы вы могли легко его распознать в дальнейшем.
4. В HTML-код страницы добавьте пустое крепление В том месте, где должен отображаться игрок, выберите уникальный класс, который вы не будете использовать для других элементов пользовательского интерфейса. Пример: <div class="my_custom_player"></div>.
5. На виджете установите Рендеринг элемента к этому самому селектору: .my_custom_player (начальная точка для класса; #id для идентификатора).
6. Поставьте Селектор содержимого Что должны услышать посетители. Одной обертки достаточно.#main or .product-descriptionИли соберите детали с помощью запятых: #intro,.body-copy,#summary. Используйте parent_class / self_class когда монтировка находится внутри этого блока контента.
7. Дополнительно: Исключить список (также разделены запятыми, то же самое) # / . правила) для навигации / рекламы / комментариев — например #comments,.ads,.share-buttons. Необязательно: Разрешенные/заблокированные URL-адреса, чтобы этот виджет работал только там, где вы хотите.
8. Установить статус на опубликованный, СохраненоВыполните принудительную перезагрузку HTML-страницы и убедитесь, что плеер заполняет ваше ездовое животное и читает правильный текст.

Требуется аудио с нет Окружающий текст страницы (в стиле демоверсии/киоска)? Оставьте поле выбора содержимого пустым и заполните его. Текст контента Вместо этого — полное пошаговое руководство: Автономный плеер с текстовым содержимым..

Минималистичная HTML-страница, которая вызывает ваш виджет.

Ниже показана структура рабочей страницы. Замените скрипт подключения своим скриптом из раздела «Интеграции». Класс монтирования должен соответствовать классу Render Element опубликованного виджета; Content Selector должен быть нацелен на... #article в этом примере.

• Монтаж в HTML - <div class="my_custom_player"></div> (пустой).
• Элемент отображения виджета - .my_custom_player.
• Селектор содержимого виджета - #article.
• скрипт подключения — встраивание вашего однострочного HTML-сайта перед </body>.

Схема (в комментариях показано сопоставление):

<!-- spoken content -->
<article id="article">…your text…</article>
<!-- player mount (Render Element = .my_custom_player) -->
<div class="my_custom_player"></div>
<!-- GSpeech connection script from Integrations -->

Вы можете разместить элемент управления над статьей, в боковой панели или в нижнем колонтитуле — селектор контента по-прежнему будет указывать на #articleТаким образом, концепция компоновки не рассматривается. Этот шаблон компоновки также описан в Разместите пользовательский виджет.

Если пользовательский виджет не отображается

1. скрипт подключения загружено по этому URL (Просмотреть исходный код / ​​Сеть).
2. Статус виджета: опубликованный (не черновик / недоступен для просмотра).
3. Объект Mount существует на странице, и написание class/id совпадает. Рендеринг элемента точно (включая ведущую линию) . or #).
4. Селектор содержимого Находит реальный текст (или текст содержимого заполнен для автономного режима).
5. Разрешенные/заблокированные URL-адреса не исключают этот путь.
6. Принудительная перезагрузка после сохранения — кэш HTML/CDN может на короткое время сохранять старую версию оболочки.

Полный алгоритм устранения неполадок: Игрок не отображается.