Започнете с шаблон, опишете кампанията и доработете резултата чрез разговор. В Onvocado дизайнът е до чата, така че можете да проверявате текста, формата и мобилния изглед, докато работите.
Това ръководство проследява приветстваща оферта за MOSS — измислена марка за грижа за кожата в актуалния редактор: избор на шаблон, задаване на инструкции, добавяне на поле, мобилни корекции, тест на записването и преглед на настройките за показване. Изображенията са нови екранни снимки, а видеото е реален запис от приложението.
Работният процес: изберете цел и шаблон, оформете дизайна с AI, проверете компютър и телефон, тествайте формата, настройте показването, прегледайте и публикувайте. След това добавете кода към сайта си и проверете реално записване през него.
Изображенията показват интерфейса на английски. Инструкциите към AI са преведени на български, а текстът на примера и имената на контролите са запазени на английски, за да ги сравнявате с екрана. Видеото има надписи на български.
За още идеи вижте осемте примера и инструкции за AI изскачащи прозорци (на английски). Тук преминаваме през един конкретен работен процес.
Преди да започнете: изберете една цел
За първата си кампания в онлайн магазин изберете една задача: събиране на имейли срещу реална приветстваща оферта, записване за бюлетин или списък за ранен достъп. Не се опитвайте с един прозорец да обясните всички продукти и да съберете всички данни за клиента.
Подгответе:
- Сайта си и начин за добавяне на собствен код — директно или чрез поддържана настройка на платформата или мениджър на тагове.
- Кратко заглавие, ясна полза и полетата, от които действително се нуждаете.
- Цветовете на марката и изображение, което имате право да използвате, ако дизайнът го изисква.
- Работещ код за отстъпка, файл или връзка, ако обещавате такива.
- Информацията за поверителност и подходящите опции за съгласие за кампанията.
Изскачащият прозорец не създава отстъпка при поръчка и не изпраща бюлетин само защото текстът го обещава. Настройте тези действия в магазина или имейл платформата си и ги проверете.
1. Изберете шаблон и опишете задачата
Отворете библиотеката с шаблони и изберете отправна точка, близка до целта ви. За примера използвахме The Sunday edit, чиято ботаническа илюстрация подхожда на спокойна кампания за грижа за кожата.
Изберете Use template („Използвай шаблона“). Следващият екран пита от коя визия да започнете и какво искате да промените. Запазихме визията на шаблона и подадохме следните инструкции, така че съществуващата илюстрация остана част от дизайна.
Създай спокойна приветстваща оферта за MOSS, магазин за ботаническа грижа за кожата. Използвай фон в цвят слонова кост (#FAF7F0), тъмно горско зелено (#173D31), топъл серифен шрифт за заглавието и акценти в салвиево зелено. Заглавие: “A little care, on us.” Текст: “Join MOSS for 10% off your first order.” Бутон: “Get my welcome offer”. Запази едно задължително поле за имейл, съществуващата опция за съгласие и ботаническата илюстрация. Цялата форма трябва да е четима на компютър и телефон.
Натиснете Start designing („Започни дизайна“) и прегледайте резултата. Използвайте своя оферта, информация за поверителност и работеща крайна връзка. Споменаването на 10% отстъпка не създава валиден код в магазина — трябва да го настроите и тествате отделно.
2. Прегледайте първия AI дизайн
Първата заявка промени заглавието, посланието и цветовете, като запази полето за имейл, опцията за съгласие и ботаническата илюстрация. Резултатът се появи до разговора за редакция с налични изгледи за компютър и телефон.
Прочетете заглавието и бутона, проверете задължителните полета и елементите, които сте поискали да останат. Първата версия ви дава конкретна основа за доработка. В този пример малкият надпис над заглавието и част от типографията все още изискваха уточнение.
3. Добавете поле и доработете детайлите
След това поискахме незадължително поле за собствено име:
Добави незадължително поле за собствено име над полето за имейл. Надпиши го First name. Запази офертата, илюстрацията, задължителния имейл и опцията за съгласие.
Полето беше добавено, но първоначално се появи под имейла. Прегледът показа разликата. Използвахме следваща заявка, за да коригираме реда и да завършим детайлите на марката:
Промени малкия надпис над заглавието на MOSS SKINCARE. Премести съществуващото незадължително поле First name преди Email address в същата форма; не добавяй дубликат. Използвай изчистен безсерифен system-ui шрифт за основния текст, етикетите на полетата и бутона, като запазиш серифното заглавие. Запази офертата, илюстрацията, ключовете на полетата, съгласието и действията при успешно изпращане.
Последна, конкретна заявка зададе изрично шрифта на заглавието и остави текста и контролите изчистени:
Задай изрично Georgia за заглавието на офертата, с размер 38px на компютър и 28px на телефон. Запази основния текст, етикетите на полетата и бутона в system-ui. Не променяй текста, реда на полетата, задължителните настройки, цветовете, илюстрацията или действията.
Правете конкретни заявки и проверявайте записания резултат. Ако промяната влоши дизайна, използвайте Undo и опитайте с по-точна инструкция. Оценявайте влиянието върху реализациите чрез отделно измерване на записванията.
4. Проверете мобилния изглед
Превключете на Mobile и прегледайте цялата форма. Първата мобилна корекция в този пример използва следната заявка:
Само на телефон задай заглавието на 28px и намали разстоянията около формата, така че бутонът за записване да се побира удобно. Запази стиловете за компютър, етикетите на полетата и целия текст без промяна.
Финалният мобилен изглед по-долу включва и по-късните корекции на марката, реда на полетата и типографията. Незадължителното име, задължителният имейл, съгласието и бутонът за записване са подредени вертикално.
Върнете се към компютърния изглед и сравнете и него. Проверете дългите етикети, грешките при въвеждане и формата с отворена телефонна клавиатура. За ненатрапчиво показване вижте ръководството за ненатрапчиви изскачащи прозорци.
Вижте работния процес в актуалната v2
Записът проследява същия дизайн на MOSS в актуалния редактор. Включва реални AI заявки, адаптивни изгледи, тест на формата, настройки за показване и преглед. Дългите изчаквания за обработка и периодите без действия са съкратени.
Изтеглете видеото в MP4 формат и 1080p.
Надписите на български са включени в самото видео. Плейърът предлага и отделна писта със субтитри на български.
Стъпките в текстов вид
- Изберете шаблон и опишете кампанията.
- Прегледайте първата приветстваща оферта за MOSS.
- Добавете незадължително поле за собствено име.
- Проверете мобилния изглед и одобрете дизайна.
- Доработете марката и реда на полетата.
- Сравнете телефонния и компютърния изглед.
- Задайте изрично желаната типография.
- Тествайте записването и потвърждението с измислени данни.
- Настройте показването и прегледайте целия поток.
5. Тествайте формата и потвърждението
Използвайте Test the popup („Тествай прозореца“), за да преминете през стъпките като посетител. Опитайте невалидни стойности и празни задължителни полета, а след това направете валидно тестово записване. Ако поле е незадължително, проверете и изпращане без него.
В този пример въведохме измислени данни за контакт, изпратихме формата в прегледа и достигнахме екрана за потвърждение:
При приветстваща оферта проверете какво действително получава посетителят. Преди публикуване заменете примерните стойности с валиден код, връзка или ясно обяснение. При по-дълъг поток тествайте всеки преход и проверете дали крайното изпращане съдържа нужните полета. Ръководството за многостъпкови прозорци помага при планирането на последователността.
6. Настройте показването и прегледайте потока
Изберете Continue to targeting („Към настройките за показване“), за да определите къде и кога да се появява кампанията. Споменаването на аудитория или закъснение в заявка за дизайн не настройва тези правила.
- Кога: изберете подходящо закъснение, условие за скролиране или поддържано правило за намерение за излизане на компютър.
- За кого: проверете сайта, филтрите за страници и устройствата.
- Колко често: прегледайте повторното показване и поведението след затваряне.
Продължете към Review („Преглед“). Проверете всеки екран и двата размера, както и информацията за инсталиране и предаване на контактите, преди да публикувате.
Следващото действие е Publish campaign („Публикувай кампанията“), когато сте готови. Записът приключва на прегледа; използвайте следващите проверки, за да завършите настройката на сайта си.
7. Публикувайте, инсталирайте и проверете записване през сайта
Записаният пример завършва на Review. За да се покаже кампанията на сайта, изпълнете стъпките за публикуване и инсталиране.
Публикуването на кампания и добавянето на кода към сайта са отделни действия. Необходими са активна кампания, правилният код за сайта и изпълнени условия за показване.
- Копирайте инсталационния код за сайта. Използвайте предоставения за конкретния сайт фрагмент и следвайте поддържания начин за добавяне на код или тагове в платформата си.
- Инсталирайте го само веднъж на нужните страници. Проверете състоянието на инсталацията и посетете публичния сайт. Прегледът в редактора не доказва, че кодът е инсталиран.
- Публикувайте или активирайте прегледаната кампания. Проверете сайта, страниците, устройствата и времето на показване.
- Посетете сайта като тестов посетител. При нужда използвайте чиста сесия, за да не попречи предишно затваряне или изпращане. Проверете компютър и телефон.
- Изпратете ясно обозначени тестови данни. Проверете потвърждението и дали записът се появява в Leads с очакваните стойности.
- Проверете обещаните връзки. Ако сте свързали поддържана имейл платформа, потвърдете записа там и състоянието на доставката. Настройте бюлетините и последващите съобщения в тази платформа.
Използвайте инструкциите за инсталиране от своя профил. При нужда вижте интеграцията с WordPress (на английски) или настройките за Google Tag Manager (на английски). Директорията с интеграции описва наличните връзки и изискванията им.
Ако прозорецът не се показва, проверете сайта, кода, публикуването, изключенията, условието за задействане, устройствата и ограниченията за честота, преди отново да променяте дизайна. Ако се показва, но контактът не пристига във външна система, проверете връзката и доставката отделно.
След публикуването: измервайте желаното действие
Следете допустимите показвания на прозореца и валидните записвания за един и същ период и разглеждайте мобилните резултати отделно. Промяната може да подобри визията, без да увеличи записванията. Използвайте принципите на A/B тестването за коректно сравнение, когато трафикът и наличните функции го позволяват.
Например 20 валидни записвания от 1000 допустими показвания дават 2% записвания. Това е илюстративно изчисление, а не резултат на Onvocado или обещание за магазина ви.
Започнете с една ясна кампания, проверете дали контактите пристигат и използвайте наблюденията, за да изберете следващата редакция. Разгледайте шаблоните или страницата за събиране на имейли за подходяща отправна точка.
За този пример
MOSS е измислена марка. Изображенията и записът са направени в актуалната v2 на 26 октомври 2026 г. с реални AI заявки и измислени данни. Видеото е съкратено за по-стегнато представяне. Проверено е записването в прегледа; инсталирането в продукционна среда, реалното предаване към имейл платформа и ръстът на реализациите не са част от записа.
