Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

1.Зайти на страницу https://developers.facebook.com/ и авторизоваться. 

2.Нажать на "My Apps"(Рис.1).

Image RemovedImage Added

Рис. 1. Главная страница

3. Открывается страница "Приложения". Нажать на кнопку "Создать приложение" (Рис.2).

Image RemovedImage Added

Рис. 2. Страница "Приложения"

4. Открывается страница "Создание приложения" раздел "Тип". Выбрать необходимый тип приложения , к примеру вариант "Компания" , и нажать кнопку "Далее", которая находится в конце страницы (Рис.3).

Image RemovedImage Added

Рис. 3. Страница "Создание приложения" раздел "Тип"

5. Открывается страница "Создание приложения" раздел "Информация". Заполнить поле "Отображаемое значение". Нажать кнопку "Создание приложения"  (Рис.4).

Image RemovedImage Added

Рис. 4. Страница "Создание приложения" раздел "Информация"

6. Открывается модальное окно для ввода пароля ещё раз. Необходимо ввести пароль и нажать кнопку "Отправить". Открывается страница "Добавление добавление продуктов в приложение". Выбрать WhatsApp, нажать кнопку "Настроить" (Рис.5).

Image RemovedImage Added

Рис. 5. Выбор WhatsApp

7. Открывается страница "API платформы WhatsApp Business". Выбрать бизнес-аккаунт из выпадающего списка. Если его не выбрать, то бизнес-аккаунт создастся автоматически. Нажать кнопку "Далее" (Рис.6).

Image RemovedImage Added

Рис. 6. Выбор бизнес-аккаунта

8. Открывается страница "Быстрый старт". Нажать кнопку "Начать использовать API" (Рис.7).

Image RemovedImage Added

Рис. 7. Страница "Быстрый старт"

9. Открывается страница "Первые шаги".
    Временный маркер доступа (Рис. 8) не может быть использован.
    Предназначен только для настройки тестового номера.
    Регистрация и подключение собственных номеров рассмотрено ниже.

Image RemovedImage Added

Рис. 8. Временный маркер доступа

10. Зайти на https://business.facebook.com/. После приветствующих модульных окон выбирать нужный аккаунт и нажать в левой панели кнопку "Настройки" (Рис.9).

Image RemovedImage Added

Рис. 9. Левая панель

11. Открывается страница "Настройки". В левой панели нажать кнопку "Настройки компании" (Рис.10).

Image RemovedImage Added

Рис. 10. Страница "Настройки"

12. Перейти на страницу "Системные пользователи". Нажать кнопку "Добавить" (Рис.11).

Image RemovedImage Added

Рис. 11. Страница "Системные пользователи"

13. Нажать кнопку "Добавить". Прочесть и принять политику недискриминации от имени ваших системных пользователей нажав кнопку "Принимаю" в модальном окне (Рис.12). 

Image RemovedImage Added

Рис. 12. Политика недискриминации

14. Открывается модальное окно с информацией о принятии. Нажать кнопку "Готово" (Рис.13).

Image RemovedImage Added

Рис. 13. Модальное окно с информацией о принятии

15. Открывается модальное окно "Создать системного пользователя" (Рис.14). Ввести имя системного пользователя и назначить
       Вводим имя для нашего нового системного пользователя, к примеру "webitel".
       Указываем роль "Администратор". Нажать Нажимаем кнопку "Создать системного пользователя".

Image RemovedImage Added

Рис. 14. Модальное окно "Создать системного пользователя"

16. Модальное окно закрывается открывается страница "Системные пользователи". Нажать
       Теперь нашему новому системному пользователю нужно предоставить доступ к нашему приложению.
       Нажать кнопку "Добавить объекты" (Рис. 15).

Image RemovedImage Added

Рис. 15. Страница "Системные пользователи"

17. Открывается модальное окно "Назначение объектов пользователю ...". Нажать "Приложение" и выбрать приложение. Переключатель

  • Тип оьекта: "Приложения".
  • Выбрать подключаемое приложение.
  • Предоставить доступ уровня: "Управление приложением"

...

  • .

Нажимаем кнопку "Сохранить изменения".

Image RemovedImage Added

Рис. 16. Назначение объектов пользователю

18. Открывается модальное окно с оповещением о добавление ресурса (Рис.17). Нажать кнопку "Готово".

Image RemovedImage Added

Рис. 17. Ресурсы добавлены

19. Закрывается модальное окно. На странице "Системные пользователи" нажать кнопку "Создать новый маркер" (Рис.18).

Image RemovedImage Added

Рис. 18. Страница "Системные пользователи"

20. Открывается модальное окно "Создание токена". Выбрать из выпадающего списка необходимое приложение.

Открываются доступные разрешение с которых необходимо выбрать

  • whatsapp_business_

...

  • management
  • whatsapp_business_

...

  • messaging

Нажать кнопку "Сгенерировать маркер"(Рис.19).

Image RemovedImage Added

Рис. 19. Генерирование маркера

21. Открывается модальное окно "Создание токена" с которого копируется маркер доступа для дальнейшего использования на стороне Webitel (Рис.20).

Warning

Созданные Сгенерированный маркер необходимо скопировать. После закрытия окна он будет не доступен для просмотра.

...

станет недоступным для просмотра.

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

Image Added

Рис. 20. Модальное окно "Создание токена"

22. Для интеграции с Webitel необходимо создать текстовый шлюз, типа Meta.

...

Как

...

создать текстовый шлюз Meta можно посмотреть здесь

...

a.Зайти на страницу https://developers.facebook.com/ и авторизоваться. 

b.Нажать на "My Apps"(Рис.1.1).

Image Removed

...

.

...

c. Открывается страница "Приложения". Нажать на кнопку "Создать приложение" (Рис.2.1).

Image Removed

Рис. 2.1. Страница "Приложения"

d. Открывается страница "Создание приложения" раздел "Тип". Выбрать необходимый тип приложения, к примеру вариант "Компания", и нажать кнопку "Далее", которая находится в конце страницы (Рис.3.1).

Image Removed

Рис. 3.1. Страница "Создание приложения" раздел "Тип"

e. Открывается страница "Создание приложения" раздел "Информация". Заполнить поле "Отображаемое значение". Нажать кнопку "Создание приложения"  (Рис.4.1).

Image Removed

Рис. 4.1. Страница "Создание приложения" раздел "Информация"

f.  Приложение создано. Перейти в Настройки - Дополнительно. Перевести переключатель "Разрешить доступ API к настройкам приложения" в активное положение (Рис.5.1). Нажать кнопку "Сохранить".

Image Removed

Рис. 5.1. Разрешить доступ API к настройкам приложения

g. Открыть страницу "Текстовые шлюзы" в приложении Admin (Webitel) и создать новый текстовый шлюз Meta

h. Открывается страница "Meta" в которой необходимо заполнить поля (Рис. 6.1).

Image Removed

Рис. 6.1. Страница "Meta"

i. Для получения значений для полей "App ID" и "App Secret"  необходимо вернуться на страницу FacebookDeveloper. Перейти в Настройки - Основное.

С этой страницы берем значение:

  • App ID - Рис. 7.1(1);
  • App Secret - Рис. 7.1(2).

Image Removed

Рис. 7.1. Основные настройки 

j. Внести данные на странице "Meta" и нажать кнопку "Сохранить". 

k. Скопировать значение с поля "URL" (Рис.6.1). Зайти на FacebookDeveloper - Панель. Выбрать "Вход через Facebook" нажав кнопку "Настроить" (Рис.8.1).

Image Removed

Рис. 8.1. Панель

l. Выбрать "Веб" (Рис.9.1).

Image Removed

Рис. 9.1. Начало работы

m. Перейти на страницу "Настройки" и вставить скопированное значение в поля "Действительные URI перенаправления для OAuth" и "Деавторизация URL обратного вызова" (Рис.10.1). Нажать кнопку "Сохранить изменения".

Image Removed

Рис. 10.1. Настройки входа

Note

Если ваш номер телефона в настоящее время зарегистрирован в WhatsApp Messenger или приложении WhatsApp Business, вам необходимо сначала удалить его. Больше информации можно посмотреть здесь

Рекомендуется использовать номер телефона, на который не зарегистрировано аккаунт(ы) на других платформах WhatsApp.

23. Открыть в текстовом шлюзе страницу вкладку "WhatsApp" (Рис.21). Вставить скопированный маркер доступа (Рис.20) в поле "Токен". Нажать кнопку "Сохранить".

Image RemovedImage Added

Рис. 21. Страница "Whatsapp"

24. Открыть страницу https://developers.facebook.com/ , перейдите в My Apps, выберите созданное ранее приложение для Whatsapp WhatsApp нажав на название. В левой колонке страницы, которая открылась, выбрать Whatsapp WhatsApp - Первые шаги (Рис.22).

Image RemovedImage Added

Рис. 22. WhatsApp - Первые шаги

25. Открывается страница "Первые шаги". Нажать кнопку "Добавить номер телефона", которая расположена в конце страницы (Рис.23).

Image RemovedImage Added

 Рис. 23. Страница "Первые шаги"

26. Открывается модальное окно "Укажите информацию о вашей компании" (Рис.24). Заполнить необходимые поля вводя информацию о вашей компании. Нажать кнопку "Далее".

Image RemovedImage Added

Рис. 24. Модальное окно "Укажите информацию о вашей компании"

27. Открывается модальное окно "Создайте профиль WhatsApp Business" (Рис.25). Внести необходимые данные, нажать кнопку "Далее".

Image RemovedImage Added

Рис. 25. Модальное окно "Создайте профиль WhatsApp Business"

28. Открывается модальное окно "Добавьте номер телефона для WhatsApp" (Рис.26). Выбрать код странны и ввести номер телефона. Выбрать способ подтверждения номера. Нажать кнопку "Далее".

Image RemovedImage Added

Рис. 26. Модальное окно Добавьте номер телефона для WhatsApp

29. Открывается модальное окно "Подтвердите номер телефона" в котором необходимо ввести код подтверждения полученный по SMS (Рис.27). После ввода кода подтверждения кнопка "Далее" становится активной - нажать на неё.

Image RemovedImage Added

Рис. 27. Модальное окно "Подтвердите номер телефона"

30. Модальное окно закрывается. Отображается страница "Первые шаги".
31. Перейти на Webitel. Открыть в текстовом шлюзе страницу "WhatsApp" (Рис.21). Нажать на кнопку "Добавить или удалить страницы". Откроется окно для входа в Facebook. Выполнить вход. Открывается окно "Какие аккаунты WhatsApp Business вы хотите использовать с приложением...?" (Рис.28). Выбрать созданный ранее аккаунт. Нажать кнопку "Далее".

Image RemovedImage Added

Рис. 28. Какие аккаунты WhatsApp Business вы хотите использовать с приложением...

32. Открывается окно "Что разрешено делать приложению...?" (Рис. 29). Поставить оба переключателя в активное положение. Нажать кнопку "Готово".

Image RemovedImage Added

Рис. 29. Что разрешено делать приложению...

33. Открывается окно подтверждения связывания приложения (Рис. 30). Нажать кнопку "Ок".

Image RemovedImage Added

Рис. 30. Окно подтверждения связывания приложения

34. Окно закрывается, обновляются данные в реестре записей. на странице "WhatsApp". В реестре отображается добавленный номер. Переведите переключатель "Включено" в активное положение. Перейдите на страницу "Текстовые шлюзы", найдите текстовый шлюз в котором настраивался WhatsApp и переведите переключатель "Состояние" в активное положение.