Интеграция с NocoDB для вывода списка рефералов по USER_ID.
В этой статье мы рассмотрим, как в Puzzle можно интегрировать NocoDB с вашими мини-приложениями для вывода списка рефералов, приглашенных пользователями. Мы используем JavaScript для создания простого интерфейса, который позволяет пользователям вводить идентификатор (ID) и получать соответствующий список рефералов.
Читать на vc.ru
В этой статье мы рассмотрим, как в Puzzle можно интегрировать NocoDB с вашими мини-приложениями для вывода списка рефералов, приглашенных пользователями. Мы используем JavaScript для создания простого интерфейса, который позволяет пользователям вводить идентификатор (ID) и получать соответствующий список рефералов.
Читать на vc.ru
🔥6👍5👎2
Forwarded from RDG :// Уроки
Небольшое обновление в нашем Генераторе HTML-шаблонов!
Теперь шаблоны классифицируются по типам, что позволяет искать их ориентируясь на задачу.
Появился раздел с нашими партнёрами, где можно найти вдохновение для своих проектов.
А ещё мы добавили новые шаблоны:
📰 Блок цитаты.
🛡 Капча с эмодзи.
❤ Блок отзыва с формой оценки.
🔁 Два новых меню навигации.
Нуждаемся в вашем экспертном мнении и идеях☕️
Теперь шаблоны классифицируются по типам, что позволяет искать их ориентируясь на задачу.
Появился раздел с нашими партнёрами, где можно найти вдохновение для своих проектов.
А ещё мы добавили новые шаблоны:
Нуждаемся в вашем экспертном мнении и идеях
Please open Telegram to view this post
VIEW IN TELEGRAM
Telegram
Генератор кода
Генератор кода – это генератор HTML-блоков для PuzzleBot по заданным шаблонам.
2👍9🔥5
Две фиксированные кнопки в одном контейнере
Кнопки в стиле фиксированной кнопки конструктора PuzzleBot
ㅤ
Как это работает?
Кнопки в стиле фиксированной кнопки конструктора PuzzleBot
ㅤ
• Цвета кнопок - произвольные цвета.
• Текст кнопок - произвольный текст.ㅤ
Как это работает?
Нажмите кнопку ниже, чтобы заполнить данные в блок из примера выше. После вы увидите превью блока и получите итоговый код для вашего бота.
👍5🔥3
Шкала загрузки цели
Как это работает?
Это простая, но эффективная реализация визуализации прогресса по сбору средств с использованием HTML, CSS и JavaScript. Может быть использована в разделе донаты.ㅤ
•
Сумма Собрано
- произвольная сумма.
•
Сумма Цель
- произвольная сумма.ㅤ
Как это работает?
Нажмите кнопку ниже, чтобы заполнить данные в блок из примера выше. После вы увидите превью блока и получите итоговый код для вашего бота.
🔥7👍4
This media is not supported in your browser
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
5🔥10👍5
Popup меню с кнопками для профиля в стиле Telegram (IOS)
В данном примере представлено popup меню, которое открывается при клике на кнопку “Настройки”. Меню содержит несколько кнопок для выполнения различных действий, все кнопки произвольные и можно заменить на свои.
Важное замечание:
Для тех, кто хочет адаптировать это меню под свое приложение или страницу, предусмотрена возможность использования атрибута
В данном примере представлено popup меню, которое открывается при клике на кнопку “Настройки”. Меню содержит несколько кнопок для выполнения различных действий, все кнопки произвольные и можно заменить на свои.
Важное замечание:
Несмотря на то, что интерфейс предоставляет удобное всплывающее меню с кнопками, переход между страницами не является бесшовным. Все переходы осуществляются по многоразовым ссылкам, которые непосредственно ведут к конкретным командам.
Для тех, кто хочет адаптировать это меню под свое приложение или страницу, предусмотрена возможность использования атрибута
goto_web_page для тега <a>.<a goto_web_page="id_веб-страницы">Перейти на нужную страницу</a>
👍8🔥7👎2
This media is not supported in your browser
VIEW IN TELEGRAM
Эффектные HTML карточки.
Анимация с акцентом на UX
Плавная анимация переключения карточек
Когда использовать:
• Профили участников проекта
• Превью блога/портфолио
• Сравнение карточек или статей
Код в комментариях🔥
Анимация с акцентом на UX
Плавная анимация переключения карточек
Верхняя карточка уезжает вниз с эффектом блюра и полупрозрачности, а нижняя всплывает и занимает её место.
Когда использовать:
• Профили участников проекта
• Превью блога/портфолио
• Сравнение карточек или статей
Код в комментариях
Please open Telegram to view this post
VIEW IN TELEGRAM
1🔥9👍6❤1👎1
Видеоурок под защитой 🔐
Этот HTML-код реализует защищённый видеоплеер с проверкой доступа.
Видео остаётся скрытым до тех пор, пока пользователь не оплатит видеоурок.
Сама ссылка на видео зашифрована и не отображается в исходном коде.
Также реализована защита от копирования: отключено контекстное меню, клавиши F12, Ctrl+U и другие инструменты разработчика.
Поверх видео наложен блюр с кнопкой «Купить», которая ведёт на страницу оплаты.
Код в комментариях👾
Этот HTML-код реализует защищённый видеоплеер с проверкой доступа.
Видео остаётся скрытым до тех пор, пока пользователь не оплатит видеоурок.
Сама ссылка на видео зашифрована и не отображается в исходном коде.
Также реализована защита от копирования: отключено контекстное меню, клавиши F12, Ctrl+U и другие инструменты разработчика.
Поверх видео наложен блюр с кнопкой «Купить», которая ведёт на страницу оплаты.
Такой подход затрудняет доступ к видео без оплаты и делает копирование ссылки максимально сложным на клиентском уровне.
Код в комментариях
Please open Telegram to view this post
VIEW IN TELEGRAM
1🔥6👍4👎1
This media is not supported in your browser
VIEW IN TELEGRAM
Интерфейс для выбора тарифных планов с возможностью переключения между месячной и годовой подпиской.
Динамическая ссылка: Кнопка «Выбрать тариф»перенаправляет пользователя на страницу платежа, соответствующую выбранному тарифу, в зависимости от того, выбрана ли месячная или годовая подписка.
Код получился слишком длинным, поэтому прикреплю HTML-файл в комментариях⚡
Изменение цен при переключении между месячным и годовым тарифом
Динамическая ссылка: Кнопка «Выбрать тариф»перенаправляет пользователя на страницу платежа, соответствующую выбранному тарифу, в зависимости от того, выбрана ли месячная или годовая подписка.
Код получился слишком длинным, поэтому прикреплю HTML-файл в комментариях
Please open Telegram to view this post
VIEW IN TELEGRAM
11🔥10👎2👍1
This media is not supported in your browser
VIEW IN TELEGRAM
Вчера @creatorbotstg 👤 предложил мне попробовать сделать Scroll Island (Остров прокрутки)
Я тут кое что накидал, оставляю вам на оценку. 😅🤝🏻
HTML-файл с полным кодом в комментариях.👇
Я тут кое что накидал, оставляю вам на оценку. 😅🤝🏻
Scroll Island — это компактный навигационный элемент, который помогает пользователю быстро перемещаться по длинной странице с большим количеством контента. Он раскрывается при нажатии, показывая список заголовков, и позволяет мгновенно перейти к нужному разделу.
HTML-файл с полным кодом в комментариях.👇
Please open Telegram to view this post
VIEW IN TELEGRAM
👍10🔥4❤1👎1
Всем доброе утро! ☀️
Ищу свежую идею для нового шаблона.
Может, у кого-то есть потребность в конкретном макете, но не хватает навыков в HTML, CSS или JavaScript?
С радостью помогу реализовать — предлагайте!
Ищу свежую идею для нового шаблона.
Может, у кого-то есть потребность в конкретном макете, но не хватает навыков в HTML, CSS или JavaScript?
С радостью помогу реализовать — предлагайте!
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3🔥2❤1
This media is not supported in your browser
VIEW IN TELEGRAM
Кому-нибудь пригодится такой шаблон?
👍14❤2👎2
Хотите предложить идею для нового HTML-шаблона? Напишите в комментариях.
🔥2❤1
Сейчас работаю над ботом и статьёй.
Не думал, что это займёт столько времени 😅
Вот какие типы рефералок уже планирую добавить 👇
🔁 1. Односторонняя
Награду получает только тот, кто пригласил.
➕ Простая и понятная схема.
🤝 2. Двусторонняя
И пригласивший, и приглашённый получают бонус.
➕ Мотивация с обеих сторон.
🎯 3. Уровневая (MLM-модель)
Бонусы за друзей, друзей друзей и дальше.
➕ Большой охват, но важно соблюдать прозрачность.
💎 4. По достижениям
Бонусы — только за активные действия рефералов.
➕ Работает на качество, а не количество.
⌛ 5. Ограниченные по времени
Работает в рамках акций.
➕ Стимулирует быстрее делиться.
💼 6. B2B-рефералка
Актуально для SaaS и сервисов.
➕ Крупные бонусы и лояльные партнёры.
📱7. Инвайт-код / ссылка
Каждому — своя реферальная ссылка.
➕ Удобно, быстро, легко отслеживать.
Если интересно — скоро открою доступ к первому прототипу 👀
Не думал, что это займёт столько времени 😅
Но процесс интересный, делаю бота, где можно будет гибко настроить реферальную систему под свой проект. Подходит и для игр, и для магазинов, и для сервисов.
Вот какие типы рефералок уже планирую добавить 👇
🔁 1. Односторонняя
Награду получает только тот, кто пригласил.
📌
«Пригласи друга — получи 500 ₽»
➕ Простая и понятная схема.
🤝 2. Двусторонняя
И пригласивший, и приглашённый получают бонус.
📌
«Вы оба получаете 10% скидки»
➕ Мотивация с обеих сторон.
🎯 3. Уровневая (MLM-модель)
Бонусы за друзей, друзей друзей и дальше.
📌
«5% от трат друзей + 2% от их друзей»
➕ Большой охват, но важно соблюдать прозрачность.
💎 4. По достижениям
Бонусы — только за активные действия рефералов.
📌
«Бонус за друга, который достиг 5 уровня»
➕ Работает на качество, а не количество.
⌛ 5. Ограниченные по времени
Работает в рамках акций.
📌
«Только до 30 июня — двойной бонус за приглашения»
➕ Стимулирует быстрее делиться.
💼 6. B2B-рефералка
Актуально для SaaS и сервисов.
📌
«Приведи компанию — получи месяц подписки»
➕ Крупные бонусы и лояльные партнёры.
📱7. Инвайт-код / ссылка
Каждому — своя реферальная ссылка.
📌 t.me/PuzzleHtmlBot?start=
username123
➕ Удобно, быстро, легко отслеживать.
Если интересно — скоро открою доступ к первому прототипу 👀
Telegram
Puzzle HTML </>
Шаблоны HTML виджетов: Мы предлагаем широкий спектр готовых шаблонов, которые помогут пригодиться в Mini-App
1🔥8❤3👍3
This media is not supported in your browser
VIEW IN TELEGRAM
Виджет «Заметки»
Интеграция с NocoDB
🔥8❤3👍1
Конструктор инструкций: всё видно сразу, без перемоток
Иногда хочется просто понять, что где стоит, не слушать длинные видео, не ждать, пока голос за кадром дойдёт до нужного момента.
Именно поэтому я решил сделать блочный конструктор пошаговых инструкций.
Видео удобно, когда ты учишься “на слух”. Но когда ты настраиваешь технику, собираешь механизм, или просто хочешь быстро найти нужный пункт - текст и схема работают быстрее.
Иногда хочется просто понять, что где стоит, не слушать длинные видео, не ждать, пока голос за кадром дойдёт до нужного момента.
Именно поэтому я решил сделать блочный конструктор пошаговых инструкций.
• Каждый шаг — отдельный блок, где видно, что и где нажимать.
• Схемы — вместо того чтобы ловить нужный кадр в видео.
• Никакой перемотки — ты просто сразу видишь нужное место.
• Всё разложено по полочкам: от простого к сложному.
Видео удобно, когда ты учишься “на слух”. Но когда ты настраиваешь технику, собираешь механизм, или просто хочешь быстро найти нужный пункт - текст и схема работают быстрее.
❤3👍2🔥1