사용자를 효과적으로 참여시키세요! Bubble.io에서 사용자 정의 팝업 알림을 만드는 방법을 단계별 가이드로 쉽게 배워보세요. 오늘 당신의 앱에서 UX를 향상시키세요!
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.
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 및 자동 메시지와 같은 설정을 제대로 구성했는지 확인하십시오.
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.
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.
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.