Как встраивать виджет на сайты?

Question

[Aleksey100]

Здравствуйте.
Пишу виджет чата для сайтов. Подскажите как вставлять его на страницу?

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

Answer 1

[Алексей Уколов]

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

Ссылка не должна генерироваться, её просто нужно указывать на сайте в виде

<script src="https://yoursite.ru/widget.js?foo=bar"></script>

.
При открытии страницы сайта автоматически делается запрос на ваш сервер с указанными параметрами, вы отдаёте javascript-код, который должен будет отрисовать виджет в каком-то блоке на странице.

Comments

[Aleksey100]

Спасибо!

А как js отрисовывает все?
У меня сейчас отдельно html, css и js чата. Если сайт делает запрос к js, то как js должен его обработать и в каком виде дать ответ сайту?

[Алексей Уколов]

Если сайт делает запрос к js, то как js должен его обработать и в каком виде дать ответ сайту?

Сайт делает запрос к веб-сервису, который в ответ отдаёт js-код. Этот код исполняется в браузере и имеет полный доступ к DOM сайта.

[Aleksey100]

Алексей Уколов, Да, я понял. Только не понял откуда на сайте с виджетом возьмется DOM самого виджета

[Алексей Уколов]

Aleksey100, создастся этим самым подгруженным js-файлом. Ну вот вам пример: https://codepen.io/alexey-m-ukolov/pen/Kmeoqv

[Aleksey100]

Алексей Уколов, А можно посмотреть widget.js ? Хотя бы участок который создает DOM виджета

[Алексей Уколов]

Можно, это ж публично доступный файл. Иначе бы виджет не работал :)

[Anton Mashletov]

Советую сразу использовать vue.js, а не городить на голом js.

[Алексей Уколов]

Для виджетов, встраиваемых на чужие сайты, тащить дополнительную библиотеку может быть не очень разумно. В моём случае она явно не нужна.