Как я интегрировал чат в Gatsby с помощью Tidio и Medusa

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

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

В этом руководстве вы узнаете, как добавить функциональность живого чата в ваш магазин электронной коммерции, используя Medusa, чат Tidio и витрину Gatsby.

Зачем добавлять живой чат в свой магазин электронной коммерции

Некоторые из причин, по которым чат является важной функцией электронной коммерции:

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

Почему стоит использовать Medusa

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

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

Почему стоит использовать Tidio

Tidio — это сервис, позволяющий добавить функциональность живого чата на любой сайт. Специально для электронной коммерции он предоставляет такие функции, как отслеживание брошенных корзин и пользовательские шаблоны продуктов для автоматизации ответов, которые способствуют увеличению продаж.

Tidio также предоставляет продавцам и агентам поддержки клиентов простой в использовании интерфейс для настройки бота live-chat и общения с клиентами. Для каждого посетителя агенты поддержки клиентов могут видеть важные детали, такие как его местоположение или последние просмотренные страницы.

Предварительные условия

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

• Node.js v14 или выше.
• Учетная запись Tidio.

Настройка сервера Medusa

Medusa предоставляет инструмент CLI для простой настройки сервера Medusa. Чтобы установить CLI-инструмент, выполните следующую команду:

npm install -g @medusajs/medusa-cli

Затем создайте сервер Medusa с помощью следующей команды

medusa new medusa-server-store --seed

В результате будет создана новая папка medusa-server-store, в которой будут размещены файлы и код сервера Medusa. В приведенной выше команде используется опция --seed. Это добавляет фиктивные продукты и данные на сервер Medusa.

Чтобы запустить сервер, перейдите в только что созданный каталог medusa-server-store и запустите сервер:

medusa develop

Вы можете протестировать свой сервер, открыв браузер и перейдя по адресу localhost:9000/store/products.

Настройка витрины Gatsby

Чтобы настроить витрину Gatsby, убедитесь, что у вас установлен Gatsby CLI.

npm install -g gatsby-cli

Затем вы можете установить витрину Gatsby:

gatsby new gatsby-storefront https://github.com/medusajs/gatsby-starter-medusa

Это создаст новую директорию gatsby-storefront, в которой будет находиться ваша витрина. Перейдите в эту директорию.

Затем переименуйте .env.template в .env.development. Здесь находится переменная окружения GATSBY_MEDUSA_BACKEND_URL, которая по умолчанию установлена на URL сервера http://localhost:9000.

Наконец, убедитесь, что сервер Medusa запущен, затем запустите витрину Gatsby с помощью следующей команды:

npm start

Откройте http://localhost:8000/ в своем браузере. Вы сможете просматривать все товары и каждый товар в отдельности.

Настройка Tidio для разработчиков

После регистрации аккаунта Tidio настройте дизайн чата, включая его цвет, название и язык.

После этого заполните форму слева своими данными, затем выберите, что вы хотите использовать Tidio для живого чата:

Далее выберите, как вы хотите привлечь своих клиентов, когда они впервые заходят в ваш магазин.

Эти сообщения являются настраиваемыми. Вы можете изменить их по своему вкусу. Вы можете изменить эти параметры позже из настроек.

Наконец, чтобы установить код Tidio в вашем магазине, выберите «Показать код».

Выберите JavaScript из списка платформ для интеграции Tidio. Это даст вам скрипт, который нужно добавить в ваш проект JavaScript.

Скопируйте этот скрипт и сохраните его для дальнейшего использования. Наконец, нажмите «Продолжить» и перейдите на панель чата Tidio.

В этот момент на панели чата вы увидите, что «код чата установлен неправильно». Это потому, что вы еще не установили код чата на фронтенд-приложение. На следующем этапе вы добавите скрипт Tidio на витрину Gatsby.

Добавление Tidio Live-Chat на витрину Gatsby

В директории витрины Gatsby импортируйте src/pages/index.js и импортируйте Helmet в верхней части файла:

import Helmet from "react-helmet"

Helmet — это многократно используемый компонент React, открываемый из библиотеки react-helmet, который используется для добавления элементов в head веб-страницы.

Затем добавьте компонент Helmet и фрагмент кода, который вы скопировали из Tidio, перед последним закрытым div в возвращаемый JSX компонента IndexPage:

<Helmet>
    <script src="//code.tidio.co/<tidio code>.js" async></script>
</Helmet>
</div>
)

Наконец, снова запустите сервер витрины Gatsby и сервер Medusa, если они еще не запущены, и снова откройте витрину. Вы увидите новый пузырек чата в правом нижнем углу.

Если вы нажмете на значок чата, появится виджет чата. Вы можете использовать чат, чтобы начать общение.

Вы можете проверить, что вы подключили Tidio к вашей витрине, проверив панель чата Tidio. Это покажет вам, правильно ли установлен чат или нет.

Протестируйте его

В качестве покупателя

Вы можете протестировать функцию чата, отправив сообщение с вашей витрины Gatsby.

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

В качестве оператора магазина

Когда вы откроете панель Tidio, новые разговоры будут показаны на вкладке «Конверсии». Теперь вы можете присоединиться к этим беседам и пообщаться с покупателями.

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

Заключение

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

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

• Stripe в качестве провайдера платежей.
• Contentful для расширенных функций CMS.
• SendGrid для отправки уведомлений по электронной почте.

Если у вас возникнут какие-либо проблемы или вопросы, связанные с Medusa, обращайтесь к команде Medusa через Discord.