Как встроить виджет Molz на свой сайт

В этой статье:

Что такое виджет Molz

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

Как работает виджет для клиентов

В Molz доступны три вида виджетов для встраивания:

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

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

Чтобы протестировать, как виджет будет выглядеть и функционировать, вы можете перейти в свою учетную запись Molz:

В панели управления перейдите в раздел «Товары».
Найдите нужный товар и в меню действий выберите «Встроить товар».
Нажмите на кнопку «Купить» в окне предварительного просмотра — это откроет модальное окно, которое и будут видеть ваши клиенты при покупке.

Посмотрите демонстрационное видео ниже:

Как встроить виджет Molz

Для встраивания виджета на ваш сайт выполните следующие шаги:

Перейдите в свою панель управления Molz и выберите раздел «Товары».
Выберите нужный товар и в меню действий нажмите «Встроить товар».
Выберите тип виджета: ссылка, кнопка или карточка товара.
Настройте текст кнопки (если это применимо) и просмотрите предварительный результат.
Скопируйте сгенерированный код и вставьте его в HTML-код вашего сайта в том месте, где вы хотите, чтобы виджет отображался.

Примечание

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

С помощью виджетов Molz вы сможете улучшить пользовательский опыт на вашем сайте, предоставив клиентам удобный и быстрый способ совершения покупок.

Как встроить виджет Molz на Tilda

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

Зайдите в свой аккаунт на Tilda и выберите сайт, на который хотите добавить виджет Molz.
Выберите страницу, на которую вы хотите встроить виджет Molz, и перейдите в режим редактирования.
Вам необходимо создать новый Zero Block или отредактировать уже существующий блок. Zero Block — это инструмент для создания уникального дизайна с возможностью добавления собственного HTML-кода.
После создания или редактирования Zero Block, добавьте новый элемент HTML.
Возьмите ранее сгенерированный код виджета Molz и вставьте его в поле для HTML-кода.
Сохрание все изменения.

Посмотрите демонстрационное видео ниже:

Как создать пользовательскую кнопку «Купить»

Если стандартный виджет кнопки «Купить» не соответствует дизайну вашего сайта, вы можете создать пользовательскую кнопку, используя собственные CSS-стили. Обратите внимание, что для этого вам потребуются знания CSS.

Шаги по созданию пользовательской кнопки:

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

У вас будет код примерно следующего содержания:

html

<script src="https://static.molz.io/js/embed/initial.js"></script>
<a href="https://mystore.molz.io/p/3747" data-molz-embed="link">Купить</a>

Чтобы кнопка соответствовала вашему дизайну, добавьте к сгенерированному коду свои CSS-стили.

Например:

html

<script src="https://static.molz.io/js/embed/initial.js"></script>
<a href="https://mystore.molz.io/p/3747" data-molz-embed="link">Купить</a>
<style>
    [data-molz-embed="link"] {
        background: blue;
        color: white;
        padding: 10px 20px;
        border-radius: 20px;
        text-decoration: none;
        font-size: 18px;
    }
    [data-molz-embed="link"]:hover {
        background: darkblue;
    }
</style>

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

Теперь вы знаете, как создать пользовательскую кнопку «Купить» для вашего сайта используя виджет Molz!

Предупреждение

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

Как встроить виджет Molz на свой сайт ​

Что такое виджет Molz ​

Как работает виджет для клиентов ​

Как встроить виджет Molz ​

Как встроить виджет Molz на Tilda ​

Как создать пользовательскую кнопку «Купить» ​

Рекомендации для нескольких кнопок на одной веб-странице ​