manifest json что это

What is manifest.json file and how it is useful

The manifest.json is a simple JSON file in your website that tells the browser about your website on user’s mobile device or desktop. Having a manifest is required by Chrome to show the Add to Home Screen prompt.

When user installs or bookmark your web application to the homescreen or adds it to an application launcher, manifest.json provides to the browser so that it can treat your website the name, icons, etc. There are then more advanced features that you would need, like being able to indicate the preferred orientation and if you want your app to be fullscreen.

The manifest.json file contains details of your website app name, icons it should use, the start_url it should start at when launched, and many other details.

You can add bellow code if your Manifest file is manifest.webmanifest.

First check if manifest.json is applied in the browser. For that open developer window by pressing shortcut F12. In Application tab, click Manifest option and see if it displays information that you have set.

Explanation

Let’s discuss some of most used options in the manifest.json file.

«short_name»: «HackTheStuff»,
«name»: «HackTheStuff blogging platform»,

«short_name» is the very short name of your web application that is displayed in homescreen or in the menu. «name» is bigger name and alias of your web application that is useful when user search in phone or desktop searchbar.

«icons»: [
<
«src»: «/images/icons-128.png»,
«type»: «image/png»,
«sizes»: «128×128»
>
],

«icons» option is the logo of your application that will display in the homescreen or the menu. It is a json array of icons object. Every object contains src, sizes and type property You can add different size of your logo and add them in manifest.json file in nested object. It will automatically adds responsive size of icon in different size of the displays.

«start_url»: «/index.html»,

«start_url» is the root URL of your web application that will always open first.

«display»: «standalone»,

«display» will tell how to display website in the browser. Options are fullscreen, minimul-ui, standalone, or browser. «standalone» will display as normal with statusbar and «fullscreen» will display in fullscreen.

«orientation»: «landscape»

«orientation» will set your application default orientation, when open.

«background_color»: «#3367D6»,
«theme_color»: «#3367D6»
In Android system, Google Chrome and other browsers, «background_color» and «theme_color» will set on splash screen that show while your site is loading.

«scope»: «/app/»,

«scope» controls the URLs that navigates all the entry and exit points in your web application. If the user opens that is outside the scope, then it opens in normal web page inside a browser tab/window.

Источник

Add a web app manifest

The web app manifest is a JSON file that tells the browser about your Progressive Web App and how it should behave when installed on the user’s desktop or mobile device. A typical manifest file includes the app name, the icons the app should use, and the URL that should be opened when the app is launched.

Manifest files are supported in Chrome, Edge, Firefox, UC Browser, Opera, and the Samsung browser. Safari has partial support.

Create the manifest file #

Key manifest properties #

short_name and/or name #

You must provide at least the short_name or name property. If both are provided, short_name is used on the user’s home screen, launcher, or other places where space may be limited. name is used when the app is installed.

For PWAs running in standalone mode, Chromium will prepend the short_name (or, if short_name is not set, alternatively the name ) to what is specified in the of the HTML document to prevent disguies attacks where standalone apps might try to be mistaken, for example, for operating system dialogs.

In consequence, developers should not repeat the application name in the when the app is running in standalone mode.

icons #

When a user installs your PWA, you can define a set of icons for the browser to use on the home screen, app launcher, task switcher, splash screen, and so on.

For Chromium, you must provide at least a 192×192 pixel icon, and a 512×512 pixel icon. If only those two icon sizes are provided, Chrome will automatically scale the icons to fit the device. If you’d prefer to scale your own icons, and adjust them for pixel-perfection, provide icons in increments of 48dp.

To be on the safe side, you should always specify a rasterized icon as a fallback for browsers that do not support SVG icons.

start_url #

The start_url is required and tells the browser where your application should start when it is launched, and prevents the app from starting on whatever page the user was on when they added your app to their home screen.

Your start_url should direct the user straight into your app, rather than a product landing page. Think about what the user will want to do once they open your app, and place them there.

background_color #

The background_color property is used on the splash screen when the application is first launched on mobile.

display #

You can customize what browser UI is shown when your app is launched. For example, you can hide the address bar and browser chrome. Games can even be made to launch full screen.

display_override #

Web apps can choose how they are displayed by setting a display mode in their manifest as explained above. Browsers are not required to support all display modes, but they are required to support the spec-defined fallback chain ( «fullscreen» → «standalone» → «minimal-ui» → «browser» ). If they don’t support a given mode, they fall back to the next display mode in the chain. This inflexible behavior can be problematic in rare cases, for example, a developer cannot request «minimal-ui» without being forced back into the «browser» display mode when «minimal-ui» is not supported. Another problem is that the current behavior makes it impossible to introduce new display modes in a backward compatible way, since explorations like tabbed application mode don’t have a natural place in the fallback chain.

These problems are solved by the display_override property, which the browser considers before the display property. Its value is a sequence of strings that are considered in the listed order, and the first supported display mode is applied. If none are supported, the browser falls back to evaluating the display field.

In the example below, the display mode fallback chain would be as follows. (The details of «window-control-overlay» are out-of-scope for this article.)

The browser will not consider display_override unless display is also present.

scope #

A few other notes on scope :

theme_color #

The theme_color sets the color of the tool bar, and may be reflected in the app’s preview in task switchers. The theme_color should match the meta theme color specified in your document head.

As of Chromium 93 and Safari 15, you can adjust this color based on a media query with the media attribute of the meta theme color element. The first one that matches will be picked. For example, you could have one color for light mode and another one for dark mode. At the time of writing, you can’t define those in your manifest. See w3c/manifest#975 GitHub issue.

shortcuts #

description #

The description property describes the purpose of your app.

screenshots #

In Chrome, the image must respond to certain criteria:

The description and screenshots properties are currently used only in Chrome for Android when a user wants to install your app.

Add the web app manifest to your pages #

The request for the manifest is made without credentials (even if it’s on the same domain), thus if the manifest requires credentials, you must include crossorigin=»use-credentials» in the manifest tag.

Test your manifest #

To verify your manifest is setup correctly, use the Manifest pane in the Application panel of Chrome DevTools.

This pane provides a human-readable version of many of your manifest’s properties, and makes it easy to verify that all of the images are loading properly.

Splash screens on mobile #

When your app first launches on mobile, it can take a moment for the browser to spin up, and the initial content to begin rendering. Instead of showing a white screen that may look to the user like the app is stalled, the browser will show a splash screen until the first paint.

Chrome automatically creates the splash screen from the manifest properties, specifically:

The background_color should be the same color as the load page, to provide a smooth transition from the splash screen to your app.

Chrome will choose the icon that closely matches the device resolution for the device. Providing 192px and 512px icons is sufficient for most cases, but you can provide additional icons for pixel perfection.

Further reading #

There are several additional properties that can be added to the web app manifest. Refer to the MDN Web App Manifest documentation for more information. You can learn more about display_override in the explainer.

Источник

Её величество иконка в manifest.json

Немного о добавление иконок для сайта в мультибраузерном и мультиплатформенном мире. О возможности добавления иконки сайта на рабочий стол мобильного устройства и многом другом.

Иконка для сайта называется Favicon.

Favicon – это маленький значок, помогающий идентифицировать страницу. Это часто забываемая концепция бренда для сайта. Они дополняют UX просмотра в нескольких ключевых местах.

В зависимости от браузера и контекста они могут отображаться:

ICO – формат изображений для отображения иконок. Изначально favicon в вебе был размером 16х16 пикселей, но со временем появилась поддержка разных размеров в ICO файле (32×32, 24×24, 48×48, 64×64, 128×128 и 256×256).

В настоящее время favicon не обязательно должен быть формата ICO. Часто встречаются форматы GIF, PNG, JPG и даже SVG favicon.

Почему я назвал статью «Ее величество иконка»? Да потому, что эта «пешка» прошла в «ферзи».

Изначально Microsoft для Internet Explorer 5 разработала способ добавления favicon на сайт. Для этого нужно было сохранить файл иконки размером 16х16 пикселей в корневой папке сайта с именем favicon.ico. Это все что требовалось, никакого HTML. Кстати, большинство браузеров до сих пор проверяют корневую папку на наличие файла favicon.ico и я всегда обязательно размещаю фавикон в главную директорию сайта.

Позже, когда favicon стал частью стандартов HTML 4.01 и XHTML 1.0, рекомендовали использовать тег link для размещения favicon.

Тег link можно прописать по разному, я использую все сразу, чтобы угадать:

Для форматов png или gif:

Иконка представляет собой точку запуска сайта или приложения. Она всегда должна смотреться хорошо. То есть быть четкой и ясной, без видимых пикселей, а размер и качество должны подходить под разрешение экрана устройства. Favicon 16×16 и 32×32 – это хороший фолбек, но они будут плохо смотреться на экранах с большим разрешением.

Дело осложняется тем, что современные браузеры и мобильные ОС требуют разные размеры иконок и угадать бывает очень трудно.

Смотрите сами неполный список рекомендаций:

Если собрать все вместе, предполагая, что мы следуем всем рекомендованным размерам для всех основных браузеров и платформ, наш набор файлов будет примерно такой:

Разметка link примерна такая:

Уверен, вы уже схватились за голову. Караул. Это ж сколько рисовать всего, да еще вставлять столько тегов.

А еще появился Manifest.json и browserconfig.xml.

По сути своей это конфигурационные файлы которые управляют иконками на той или иной ОС или браузере.

Но сначала разберемся с этими файлами, а не с иконками разных размеров.

Manifest.json

Файл манифеста содержит информацию об иконках, цветовой теме, ориентации экрана, начальном URL и т.д. Используется для создания виджета в закладках браузеров.

Подключение файла как и всего остального в head:

Пример простого файла:

Манифест для сайта – это простой JSON-файл, который позволяет вам настроить следующие вещи:
1. Какая будет иконка у пользователя, после того как он добавит ваш сайт на рабочий стол
2. Как будет запускаться ваш сайт (с адресной строкой, без нее или в полноэкранном режиме)
3. Splash screen
4. Цветовую тему
5. Ориентацию экрана
6. Начальный url
и многое другое, например мы можем убрать адресную строку, чтобы было похоже на нативное приложение.

Кратко пройдемся по параметрам:

Как быстро все реализовать:

1. Вначале приготовьте прозрачный свой логотип или квадратную картинку в формате PNG, достаточного размера.

Выставляем в нем галочки как на скриншоте:

Выбираем созданную заранее картинку и генерируем.

И о чудо! Получаем полный комплект иконок с нужными названиями и размерами, готовые конфигурационные файлы и теги link для вставки в шаблон сайта.

Хотя прямое назначение этого сервиса генерировать иконки, а не манифест, он его создает. Таким образом, у вас будут и иконки (для iOS и Андроид), и манифест. Полный комплект! Правда, манифест придется подправить (изменить имя и прочие настройки).

Я исправил в нем только имя:

Если name не влазит, устройства сами берут short_name. Лучше имя покороче, чтоб влазило под иконку в одну строку.

Правьте в NotePad++ в UTF-8 без BOM.

Вставил полученные на этом же сервисе теги в head:

И кинул все иконки в главную директорию (не хотелось пути менять).

В результате, добавив ссылку на экран IPhone, получил такое:

А совсем недавно такое работало только на андроид системах. Прогресс идет.

Очень удобный, есть много настроек для каждого устройства с демо результата. Я пользуюсь им.

Мне в нем понравилось, что он генерирует и черно-белый файл svg, кроме всего прочего. Для чего он нужен?

А нужен он в В Mac OS с его Safari (не путайте Safari в iOS!).

Чтобы использовать SVG Mac OS, необходимо указать атрибут rel со значением mask-icon, все элементы SVG должны быть черного цвета. Но не стоит пугаться, цвет можно поменять атрибутом color. Эта SVG-иконка нужна для закрепления вкладки в Safari. А цвет при наведении будет таким, какой мы указали в атрибуте color.

Если не указывать эту иконку, то браузер будет отображать первую букву домена вашего сайта.

В Mac OS особо не разгуляешься, к сожалению. Если сохранить сайт на рабочий стол в Mac OS, то значок будет отображаться как скриншот страницы с html кодом. Просто так сайт приложением в Mac OS не сделать.

Для такой маленькой иконки очень много работы

С этим соглашается Philippe Bernard, автор RealFaviconGenerator. Он протестировал несколько вариантов, чтобы уменьшить количество необходимых файлов.

Он предполагает, что более минимальный подход обеспечивает достаточное покрытие совместимости для подавляющего большинства случаев.

Пусть браузер сам занимается уменьшением

Как говорилось ранее, браузеры обычно используют иконку самого близкого большего размера и уменьшают ее до желаемого размера, когда оптимального размера нет.

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

Но есть случаи, когда такой подход не позволителен: необходимо, чтобы иконки всегда смотрелись идеально, чтобы были видны детали и цвета, чтобы все было читаемо и хорошо смотрелось на всех размерах. В больших иконках лучше добавить больше деталей, таких как текст, название бренда, то, что невозможно поместить на маленькие размеры.

Минимальный набор иконок (от Ruadhán O’Donoghue)

Следующие файлы в корневой папке

favicon.ico (с размерами 16×16, 32×32)

favicon-16×16.png: современный эквивалент формата ICO

apple-touch-icon-180.png: Apple touch icon

safari-pinned-tab.svg: SVG на закрепленной вкладке в Safari

mstile-150×150.png: MS плитка

Файл manifest.json, использующий изображение chrome:

Файл browserconfig.xml, использующий изображение mstile:

Но проще воспользоваться сервисом. Ничего страшного и утяжеляющего сайт не будет, если вы все сделаете как я написал.

Можно и закончить эту публикацию, но осталась одна важная вещь:

Сейчас многие шаблоны прописывают вызов иконки из папки самого шаблона. Если шаблон и фреймворк не позволяет вывести иконку из директории шаблона, то не забудьте путь до нее разрешить в robots.txt. Пример: Allow: /templates/vash-shablon/favicon.ico Так как по умолчанию в нем закрыто индексирование папки templates (для CMS Joomla).

Я попробовал, взял иконку для айфона побольше и переименновал, добавил link и дописал в ранее созданный manifest.json рекомендуемое яндекс.

Это для информации. Меня вполне устраивают на панели быстрого запуска яндекс браузера и стандартно формируемые.

Вот и все, пожалуй, на это время. В принципе просто, но конечно удивляет и восхищает Карьера фавиконки за эти годы. Мы сами придумываем себе трудности, чтобы их преодолевать. Вроде, про это.

После того как я написал эту статью, прошло не так много и времени и в Яндекс вебмастере появились уведомления, что формат SVG у них сейчас стал рекомендуемый. Требования к фавиконке: Размер: 120 × 120 пикселей (рекомендуемый), 16 × 16 или 32 × 32. Формат: SVG (рекомендуемый), ICO, GIF, JPEG, PNG, BMP. Совет. Используйте размер 120 × 120 пикселей или формат SVG, чтобы на сервисах Яндекса логотип сайта выглядел четче и заметнее.

SVG формат конечно хорош, но я лично рисовать ничего не буду. И так все четко и заметно. Могли бы сами сконвертировать при желании. В on line конвертерах в svg из png и генераторах даже не пытайтесь, при сохранении будет черно-белая иконка (такая применима только в mac os. Писал выше). Если есть правильная цветная svg, то вставить ее можно как обычный файл, используя в type (Тип передаваемых данных) image/svg — для формата SVG:

Источник

Manifest json что это

После того, как вы распакуете архив, вы увидите в корне папку widget_example, структуру которой мы рассмотрим:

Файл	Описание
manifest.json require	Файл в формате json, содержащий описание виджета, настройки виджета, параметры виджета, выводимые пользователю, локализации, с которыми работает виджет.
script.js	JS-файл, который будет подключен на стороне пользователя в указанных в manifest.json областях
images/	Папка для размещения файлов изображений, которые используются в виджете. Должна содержать в себе 5 файлов в формате (png, jpeg,jpg или gif), которые будут использоваться как логотип виджета в разных областях видимости. Размер каждого файла не должен превышать 300 КБ. logo_min.png и logo_medium.png — обязательно, если виджет работает в карточках, используется во всех списках и карточках контактов или сделок в свернутом и развернутом состоянии соответственно. Изображения logo_main и logo_small дублируют цели logo_min соответственно, обязательны к отгрузке с ноября 2018 года. Также необходимо загрузить logo.png для поддержки старых версий.

Как видите, обязательным является только файл manifest.json

Начинаем разработку

В качестве примера, мы возьмем виджет, который основан только на JS. Он выводит кнопку в карточке контакта, при клике на которую данные из карточки отправляются во внешнюю систему, где для примера обрабатываются php-скриптом заглушкой, которая может быть написана на любом языке.

Это частая задача, т.к. не редко требуется по бизнес процессу передавать данные из amoCRM, по действиям сотрудника, во внутреннюю систему компании. Или наоборот выводить дополнительные данные из внешней системы в карточки amoCRM.

Кроме того, API amoCRM поддерживает событийную модель вызова сторонних скриптов через WebHooks- механизм. Он позволяет при определенных событиях, к примеру, изменение статуса сделки или изменение контакта, обращаться по указанному в настройках URL-скрипту и передавать в него актуальные данные.

Также, публичные виджеты могут взаимодействовать с функционалом digital воронок сделок и покупателей. Подробнее можно узнать в разделе Digital pipeline

Итак, сначала копируем папку с примером виджета и называем ее widget. Это основа нашего будущего виджета.

Файл widget.php мы пока использовать не будем, поэтому можете его смело удалить. Далее начинаем разбираться со всеми файлами по очереди.

manifest.json

Начинаем редактировать файл, руководствуясь таблицей описания его параметров. В значении вы можете использовать ссылку на языковые сообщения, если нужно. Внимание! С ноября 2018 года добавилось 3 ОБЯЗАТЕЛЬНЫХ поля в manifest.json. Первые два поля отвечают за обратную связь и располагаются в кнопке “Обратная связь” (необходимо указать ссылку на сайт поддержки, либо email). Обратите внимание, email является менее приоритетным способом связи. Краткое описание виджета будет располагаться в левой части модального окна. С ноября 2019 года добавлено ОБЯЗАТЕЛЬНОЕ свойство в manifest.json – тур. Тур — это набор картинок, на которых демонстрируется функционал виджета. Обязательными поля данного свойства являются: поле с указанием включением тура для виджета, ключи локализаций для картинок тура и ключ ланга, содержащего краткий текст, который будет выведен в момент показа тура виджета. Подробнее можно узнать в статье.

Параметр	Описание
widget	Блок содержит все основные настройки виджета
widget/name	Обязательное поле. Название виджета, в том числе для отображения в списке виджетов. Должно содержать путь к переводу в языковых файлах. В примере стоит значение widget.name, а это значит, что значение будет взято из соответствующего файла папки i18n, в зависимости от локализации.

Если виджет загружен из интеграции, то будет использоваться имя, указанное в интеграции, при этом поле пока что остается обязательным.

widget/description Обязательное поле. Полное описание виджета, показывается в окне настроек виджета. Должно содержать путь к переводу в языковых файлах. Вы можете использовать html-тэги, а также специальные short-теги для того, чтобы сформировать максимально персонифицированное описание. К примеру, вам нужно показать описание, подсказав пользователю субдомен аккаунта amoCRM в котором он работает. Список доступных тэгов:
#HOST# – текущий хост;
#SUBDOMAIN# – субдомен аккаунта;
#LOGIN# – логин текущего пользователя, авторизованного пользователя;
#API_HASH# – хеш-ключ пользователя;
#ACCOUNT_ID# – id текущего аккаунта в системе;
#LINK#http://example.test/link_to_copy#/LINK# – тег данного вида преобразуется в поле и кнопку, при нажатии на которую скопируется ссылка;
#USER_ID# – id текущего пользователя в системе.

Если виджет загружен из интеграции, то будет использоваться описание, указанное в интеграции, при этом поле пока что остается обязательным.

widget/short_description Обязательное поле. Короткое описание для вывода в списке виджетов. Должно содержать путь к переводу в языковых файлах. widget/code Обязательное поле только для виджетов загруженных через раздел API. То, что нужно ввести латинскими символами при генерации ключа на странице разработчика. Ваш код виджета widget/secret_key Обязательное поле только для виджетов загруженных через раздел API. Секретный ключ виджета, который вы сгенерировали на странице разработчика widget/version Версия виджета. Носит только информативную нагрузку. (Рекомендуется увеличивать версию при каждой загрузки архива виджета для того, чтобы иметь актуальные файлы в системе) widget/interface_version (int) Версия интерфейса (1,2) для какого именно интерфейса системы загружается виджет. По умолчанию необходимо оставлять 2. Интерфейс 1 — предыдущая версия интерфейса всей системы amoCRM, без использования AJAX. Регистрация на старую версию сейчас закрыта. widget/init_once (true/false) указывает на то, нужно ли собирать js объект виджет 1 раз за сеанс работы с интерфейсом amocrm. При инициализации виджета вызываются функции render(), init() и bind_actions() (подробнее о них в части script.js). Указание true или false регулирует возможность каждый раз при переходе из области в область (подробнее об областях подключения) вызывать функции init() и bind_actions(), или вызвать их только один раз. К примеру, виджеты телефоний постоянно удерживают WebSocket соединение и его обрыва происходить не должно, поэтому init_once должно иметь значение true. Если же общего для всех страниц контекста нет, то лучше ставить в false. widget/locale Обязательное поле c массивом кодов языков, на которых будет доступен виджет. Под каждый язык должен быть свой файл с переводом в папке i18n. Доступные языки: ru, en, es (русский, английский и испанский соответственно).

Если виджет загружен из интеграции, то языковые файлы должны совпадать с теми языками, которые заполнены в интеграции.

widget/installation (true/false) Если выбрано false, то виджет будет отображаться только в списке виджетов, не запрашивая настройки или установку в аккаунте. Это актуально, когда все настройки происходят в другой системе, взаимодействующей с amoCRM через API. widget/is_showcase (true/false) True изменяет название кнопки “Установить” на “Посмотреть”. Это необходимо, когда виджет носит информационный характер, не устанавливается напрямую. installation при этом должен быть false. locations Интерфейсы в которых должен быть отображен виджет. Массив, обязательный для заполнения, в случае если необходимо использовать js часть виджета. Подробнее об областях.
Возможные местоположения:
llist — список сделок, clist — список контактов, tlist — список задач, lcard — карточка сделки, ccard
— карточка контакта, card_sdk — SDK карточки, culist – cписок покупателей, cucard – карточка
покупателя, digital_pipeline – digital воронка сделок и покупателей, catalogs – SDK списков,
whatsapp_modal – модальное окно интеграций, работающих с WhatsApp, advanced_settings – страница
расширенных настроек виджета, salesbot_designer – возможность использовать виджет в конструкторе Salesbot, sms – возможность отправки системных SMS виджетом, mobile_card – возможность использования виджета в мобильных приложениях. Так же необходимо сообщить нашей системе будет
ли виджет использовать правую колонку для отображения, сделать это можно дописанием 0 или 1 после
указания зоны. То есть, если указать “clist-0”, виджет инициализируется в данной зоне, но не будет
использовать правую колонку. К примеру, панель для WEB-фона находится не в правой колонке виджетов, а
внизу в любом интерфейсе. Поэтому для всех мест подключения в настройках виджета должно быть написано
0, но при этом на каждой странице он инициализируется.
amoforms – возможность использования виджета в веб-формах. tour Блок содержит все основные настройки для тура виджета. Пример реализации можете посмотреть ниже tour/is_tour (true/false) указывает на то, нужно ли включать тур для виджета tour/tour_images Содержит ключи локализаций для картинок тура tour/tour_images/(en|ru|es) (Array) Содержит путь до изображений для тура в зависимости от локализации tour/tour_description Ключ ланга, содержащего краткий текст, который будет выведен в момент показа тура виджета settings Массив настроек виджета, доступных пользователю, т.е. поля, которые будут присутствовать в окне настроек виджета и заполняться пользователем. Данный раздел требуется только если installation = true, если installation = false, то данный раздел не нужен, т.к. в окне настроек будет выводиться только описание виджета.Ключем в массиве является код поля FIELD_CODE settings/FIELD_CODE/name Название поля (только ссылка на элемент в lang файле) settings/FIELD_CODE/type Тип поля. Доступные варианты:

Подробно типы полей разобраны в разделе Типы полей раздела settings manifest.json

settings/FIELD_CODE/required true/false обязательность заполнения поля пользователем. dp Блок настройки виджетов в digital pipeline.
Данный блок необходимо включать в manifest.json, только если есть область видимости digital_pipeline.
С функционалом digital pipeline могут работать только публичные виджеты, имеющие файл widget.php, в котором присутствует endpoint digital_pipeline (подробнее Digital pipeline) dp/settings Аналогичен блоку settings, но будет выводится при настройке виджета в digital воронке. dp/action_multiple Обязательное поле в блоке dp, значения – true/false, определяет, может ли действие виджета растягиваться на несколько этапов dp/webhook_url Если функционал вашего виджета реализует только отправку данных из Digital Pipeline на ваш собственный URL по вебхук (то есть другой бизнес-логики на стороне виджета нет), используйте это поле. В случае указания webhook_url amoCRM будет отправлять вебхук напрямую по указанному адресу, поэтому php-часть виджета делать не нужно. dp/title Название вашего триггера, которое отображается в настройках Digital Pipeline. Принимает ключ ланга из i18n. widget/support/link Ссылка на поддержку интеграции (обязательно) widget/support/email Email технической поддержки (обязательно в случае отсутствия ссылки на поддержку интеграции) advanced/title Ключ в ланг файле для названия страницы виджета в настройках. salesbot_designer Параметры для добавления виджета в конструкторе Salesbot. Подробней читайте по ссылке. sms/endpoint Адрес, на который будет отправлен запрос для отправки системного SMS. Подробней читайте по ссылке. mobile/frame_url Адрес, который будет открыт в специальной области в мобильном приложении. Подробней читайте по ссылке. mobile/color HEX код цвета, который будет использован как подложка под заголовкам блока с виджетом. amoforms_settings/title Ключ в ланг файле для отображения названия пункта виджета в веб-формах. amoforms_settings/required Обязательность в веб-формах, прежде чем клиент нажмет обычную кнопку “Отправить”, ему необходимо нажать на кнопку виджета. Необязательный параметр amoforms_settings/error_text Ключ в ланг файле для отображения ошибки виджета в веб-формах. Необязательный параметр

Пример manifest.json

Особенности, связанные с oAuth интеграциями:

i18n Файлы локализации

В примере manifest.json используются конструкции вида widget.name. Они необходимы, если ваш виджет должен работать более, чем на одном языке.

В таком случае необходимо создать в папке i18n два файла локализации для русского и английского языка ru.json и en.json. За тем, в зависимости от языка аккаунта как в JS части, так и в PHP, будут доступны языковые сообщения на соответствующем языке.

ВАЖНО: Если используется 2 локализации, то необходимо, чтобы файлы были одинаковыми по структуре.

Источник