Разное

Готовый код html: Готовый код сайта Html + CSS

07.07.2023

Как добавить HTML-код в конструкторе сайтов «вДиалоге»

Ранее мы уже рассказывали о добавлении виджетов «Кнопок социальных сетей», «YouTube» и «Twitter» на сайт, а для размещения других сторонних сервисов на конструкторе сайтов «вДиалоге» воспользуйтесь специальным блоком для интеграции HTML-кода.

Блок «Пользовательский виджет» предназначен для добавления внешнего виджета или любых других HTML-элементов на созданный сайт с помощью кода.

Он находится в разделе «Виджеты»:

После размещения блока на страницу открывается окно текстового редактора:

Он состоит из поля для ввода текста (HTML-кода) и кнопок публикации блока, удаления или сохранения его в черновики.

Для самостоятельного создания кода можно воспользоваться сторонними сервисами, генераторами HTML-кода. Например, необходимо добавить нестандартную форму сбора обратной связи о проведенном мероприятии в Google Forms. Предварительно настроив форму, копируем HTML-код, предоставленный сервисом.

Затем добавляем на сайт новый блок «Пользовательский виджет» и вставляем ранее скопированный код.

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

При добавлении стороннего HTML-кода важно учитывать теги <head> и <body>. В зависимости от выполняемой функциональности код можно разместить на странице внутри тега <body>, либо в <head> сайта или страницы. Если генераторы кода не сообщают, внутрь какого тега нужно вставить скопированный код, они подразумевают тег <body>, прописывать его отдельно в блоке «Пользовательский виджет» не нужно. Но если генераторы кода говорят о том, что скопированный код нужно добавить внутрь тега <head>, пропишите его самостоятельно в поле ввода текста (html-кода) и вставьте скопированный код между открывающим тегом <head> и закрывающим тегом </head>.

Рассмотрим ситуацию, когда необходимо внести скопированные фрагменты кода в теги <head> и <body>. Например, нужно добавить форму сбора контактов клиентов с автоматическим расчётом стоимости кухни, предоставлением скидки за заполнение и отправкой бесплатного каталога материалов. Предварительно настроенную форму отправляем на публикацию и получаем сгенерированный HTML-код. Сервис предоставляет два фрагмента кода, часть для тега <head> и часть для тега <body>. В поле для ввода текста добавляем теги <head> и <body>, редактор автоматически создаст закрывающие теги.

Затем копируем полученные от сервиса фрагменты кода для каждого тега и вставляем их между открывающими и закрывающими тегами. Должно получиться следующее:

Нажимаем кнопку «Опубликовать» и проверяем корректность работы добавленного HTML-кода.

Перед работой с блоком «Пользовательский виджет» рекомендуем предварительно добавлять сторонний код на скрытой от посетителей сайта странице, и только после проверки правильной работоспособности добавленного блока переносить его на целевую страницу.

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

Остались вопросы? Напишите нам.

Просмотр исходного кода HTML в браузере