Самописный сайт
Инструкция по добавлению кода виджета Touch_me для сайтов с индивидуальной разработкой: HTML, PHP, Laravel, Django, Node.js, React, Vue, Next.js и других технологий.
3 мин. на чтение
Содержание инструкции
Установка виджета через общий шаблон сайта
Этот способ подходит для сайтов с собственным кодом или разработкой. Код Touch_me нужно подключить один раз в общем шаблоне сайта — внутри тега <head>. После этого скрипт будет загружаться на всех страницах сайта.
Шаг 1. Найдите общий шаблон сайта
Если у вас нет доступа к файлам сайта, передайте эту инструкцию разработчику.
Нужно найти файл, который формирует общую HTML-разметку страниц и содержит теги <html>, <head> и <body>.
Название файла зависит от технологии, на которой работает сайт:
- HTML / PHP: index.html, index.php, header.php, layout.php, template.php
- Laravel: resources/views/layouts/app.blade.php, resources/views/layouts/main.blade.php
- Django: templates/base.html, templates/layout.html
- React / Vite: index.html или основной layout-компонент
- Next.js: app/layout.tsx, app/layout.jsx, pages/_document.js, pages/_document.tsx
- Vue / Nuxt: app.vue, layouts/default.vue, app.html
Шаг 2. Найдите закрывающий тег </head>
Откройте общий шаблон и найдите закрывающий тег </head>. Обычно рядом с ним находятся метатеги, стили, аналитика и другие подключаемые скрипты.
Шаг 3. Добавьте код виджета
Вставьте код Touch_me непосредственно перед закрывающим тегом </head>:
<script async src="https://api.touchme.pro/widget/bundle.js?site=ВАШ_ID" data-touch-me-widget-siteid="ВАШ_ID" data-touch-me-api="https://api.touchme.pro"></script>В результате блок <head> может выглядеть так:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Название сайта</title>
<link rel="stylesheet" href="/assets/css/style.css">
<script async src="https://api.touchme.pro/widget/bundle.js?site=ВАШ_ID" data-touch-me-widget-siteid="ВАШ_ID" data-touch-me-api="https://api.touchme.pro"></script>
</head>Шаг 4. После этого сохраните изменения и опубликуйте обновлённую версию сайта.
Особенности для SPA и JavaScript-фреймворков
Если сайт работает как SPA на React, Vue или Angular, скрипт также нужно подключать глобально — через index.html или корневой layout-компонент.
Не добавляйте код отдельно в каждую страницу или компонент. При навигации внутри SPA это может привести к повторной загрузке скрипта.
Для Next.js используйте корневой layout или документ приложения. Если сайт использует серверный рендеринг, убедитесь, что скрипт подключается с учётом архитектуры проекта и, при необходимости, только на клиентской стороне.
Проверка установки
После установки рекомендуем убедиться, что код подключён корректно.
- Опубликуйте изменения на рабочем сервере.
- Откройте ваш сайт в браузере.
- Нажмите Ctrl + U (на macOS — ⌘ + Option + U), чтобы открыть исходный код страницы.
- Нажмите Ctrl + F и найдите data-touch-me-widget-site-id.
- Убедитесь, что скрипт расположен внутри блока
<head>...</head>.
Важно
- Код виджета должен быть подключён только один раз.
- Не добавляйте код в отдельные страницы, карточки товаров или компоненты, если он уже есть в общем шаблоне.
- После публикации очистите кэш приложения, CDN и браузера, если они используются.
- Если на сайте включены минификация, оптимизация или Content Security Policy (CSP), убедитесь, что они не блокируют загрузку скрипта с api.touch-me.pro
Связанные инструкции и гайды
Содержание инструкции
Попробуйте все возможности touch_me бесплатно! Триал - 14 дней
Попробовать бесплатноИзучите инструкции и гайды
Начните повышать
конверсию уже сегодня
Подключите touch_me и превратите трафик
в реальные заявки
