/No-Code Development Agency

Bubble.io에서 팝업 알림을 어떻게 추가하나요?

사용자를 효과적으로 참여시키세요! Bubble.io에서 사용자 정의 팝업 알림을 만드는 방법을 단계별 가이드로 쉽게 배워보세요. 오늘 당신의 앱에서 UX를 향상시키세요!

Matt Graham, CEO of Rapid Developers

Book a call with an Expert

Starting a new venture? Need to upgrade your web or mobile app? RapidDev builds Bubble apps with your growth in mind.

Book a free No-Code consultation

Bubble.io에서 팝업 알림을 어떻게 추가하나요?

Bubble.io에서 팝업 알림을 만드는 것은 OneSignal과 같은 플러그인 덕분에 간단한 과정입니다. 웹 알림의 쉬운 통합을 허용합니다. 팝업 알림을 추가하려면 다음 단계를 따르십시오:

단계 1: OneSignal 플러그인을 설치하십시오. Bubble 편집기의 "플러그인" 탭으로 이동하여 "OneSignal 웹 알림"을 검색하고 플러그인을 설치하십시오.

단계 2: OneSignal 계정을 만들고 새 앱을 설정하십시오. OneSignal 대시보드로 이동하여 "앱 추가"를 클릭하여 새 애플리케이션을 만드십시오.

단계 3: 플랫폼으로 '웹 푸시'를 선택하십시오. 설정 과정 중 "워드프레스 플러그인 또는 웹사이트 빌더"에서 "Bubble"을 선택하십시오. 이렇게하면 Bubble 앱과의 통합을 위한 설정이 사용자 정의됩니다.

단계 4: OneSignal 앱을 구성하십시오. "사이트 설정"에 Bubble 앱 도메인을 입력하고, Bubble 앱이 HTTPS를 사용하므로 'https'로 시작해야합니다.

단계 5: 알림 메시지 설정을 하십시오. "허용 메시지 설정"에서 "메시지 추가"를 클릭하십시오. 슬라이드 메시지 옵션을 선택하고 자동 메시지를 끄는 것이 좋습니다. Bubble에서 사용자 경험을 더 세밀하게 제어할 수 있습니다.

단계 6: "설정" > "키 및 ID"에서 OneSignal 대시보드에 있는 OneSignal 앱 ID 및 API 키를 검색하십시오. 이 키를 Bubble 편집기의 OneSignal 플러그인 설정에 입력하십시오.

단계 7: 앱에 알림 메시지를 통합하십시오. 사용자에게 알림을 허용하라는 메시지를 요청하려는 Bubble 워크플로의 "메시지 표시" 작업을 사용하십시오. 자동 메시지 기능을 끄는 것이 중요한 이유는 앱에서 구체적인 행동의 결과로 메시지를 수신하길 원하기 때문입니다.

단계 8: Bubble 워크플로를 사용하여 알림을 보내십시오. OneSignal 플러그인이 제공하는 Bubble 워크플로 작업을 사용하여 개별 사용자, 사용자 목록, 세그먼트 또는 태그 필터 기반으로 알림을 보낼 수 있습니다.

단계 9: 알림을 테스트하십시오. 앱을 미리보고 알림 메시지를 트리거하고 알림을 보내는 작업을 수행하여 모든 것이 올바르게 작동하는지 확인하십시오.

단계 10: 앱을 배포하십시오. 알림 기능에 만족하면 앱을 배포하여 사용자가 팝업 알림을 받을 수 있도록 하십시오.

기억하십시오. OneSignal 플러그인이 완전히 작동하려면 Bubble의 최소한의 개인 플랜이어야하며, 라이브 앱 도메인에 대한 액세스가 설정에 필요합니다. iOS 기기에서는 알림이 작동하지 않습니다. 현재 Apple 모바일 기기는 웹 푸시 알림을 지원하지 않습니다. 모든 단계를 주의 깊게 따르고 HTTPS 및 자동 메시지와 같은 설정을 제대로 구성했는지 확인하십시오.

더 유용한 노코드 리소스 살펴보기

No-Code Tools Reviews

Delve into comprehensive reviews of top no-code tools to find the perfect platform for your development needs. Explore expert insights, user feedback, and detailed comparisons to make informed decisions and accelerate your no-code project development.

Explore

WeWeb Tutorials

Discover our comprehensive WeWeb tutorial directory tailored for all skill levels. Unlock the potential of no-code development with our detailed guides, walkthroughs, and practical tips designed to elevate your WeWeb projects.

Explore

No-Code Tools Comparison

Discover the best no-code tools for your projects with our detailed comparisons and side-by-side reviews. Evaluate features, usability, and performance across leading platforms to choose the tool that fits your development needs and enhances your productivity.

Explore

By clicking “Accept”, you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts. View our Privacy Policy for more information.

Cookie preferences