앱 사용자에게 푸시 알림을 자동으로 보내고 싶지만 코딩할 줄 몰라 저희 API를 사용할 수 없었던 적이 있나요? 이제는 문제없어요! webtoapp.design을 자동화 플랫폼인 Zapier와 통합했어요. Zapier를 사용하면 코드를 직접 작성하지 않고도 수천 개의 서비스를 webtoapp.design API와 연결할 수 있어요.
사용해 볼 준비가 되셨나요? 이 통합 기능은 아직 베타 버전이므로 다음 링크를 클릭해 접근 권한을 받아야 해요. webtoapp.design Zapier 통합 기능에 접근하기
연결 예시
webtoapp.design 블로그에 새 글을 게시할 때 자동으로 알림을 보내도록 Zap을 설정했어요. 이를 위해 아래 스크린샷과 같이 "RSS by Zapier" 트리거를 사용했어요.
WordPress 통합
웹사이트에 RSS 피드가 없더라도 같은 목적에 사용할 수 있는 다른 통합 기능이 많이 있어요. 예를 들어 WordPress 통합은 "새 게시물" 트리거를 제공해요. 이 트리거를 사용해 모든 사용자에게 알림을 보내거나, 더 고급 기능인 주제별 알림을 설정할 수 있어요. 주제별 알림을 이용하면 사용자가 웹사이트의 카테고리를 구독하고, 구독한 카테고리에 새 게시물이 게시될 때 알림을 받을 수 있어요. 이를 위한 Zapier 구성은 다음과 같아요.
- Trigger App: Wordpress
- Event: New Post
- Trigger:
- Post Status: Published
- Post Type: Posts
- Action App: webtoapp.design
- Event: Send Topic Push Notification
- Action Setup:
- Topic: Terms Slug (글의 카테고리예요)
- Push Notification Title: Title Rendered
- URL to Open on Click: Link
- 다른 필드는 비워 두거나 원하는 대로 입력할 수 있어요.
그런 다음 사용자가 주제를 구독하거나 구독 취소할 수 있도록 웹사이트에 다음 스크립트와 버튼을 추가하세요.
코드 보기
이 코드는 기본적으로 현재 페이지의 카테고리를 찾고, 사용자가 버튼을 클릭하면 앱에 해당 카테고리를 구독하거나 구독 취소하도록 지시해요.
<button type="button" id="subscribe-category-button" style="display: none; color: white;" onclick="toggleSubscriptionStatus()"></button>
<script src="https://webtoapp.design/static/js/app-helper.js"></script>
<script>
executeWhenAppReady(async () => {
document.getElementById("subscribe-category-button").style.display = "block";
updateButton(await getSubscriptionStatus());
});
function updateButton(isSubscribed) {
var subscribeButton = document.getElementById("subscribe-category-button");
subscribeButton.innerHTML = isSubscribed ? "Unsubscribe" : "Subscribe";
subscribeButton.style.backgroundColor = isSubscribed ? "red" : "green";
}
async function getSubscriptionStatus() {
var subscribedTopics = (await getSubscribedNotificationTopics())["topics"];
return subscribedTopics.includes(getTopicName());
}
function getTopicName() {
for (var className of document.querySelector("article.post").classList) {
if (className.startsWith("category-")) {
return className.substring(9);
}
}
}
async function toggleSubscriptionStatus() {
try {
var subscriptionStatus = await getSubscriptionStatus()
setNotificationTopicSubscriptionStatus(!subscriptionStatus, getTopicName());
updateButton(!subscriptionStatus);
} catch (e) {
console.log(e);
}
}
</script>
다른 아이디어
푸시 알림을 자동화할 수 있는 몇 가지 아이디어를 더 소개해 드릴게요.
- "Schedule by Zapier" 트리거로 매주 같은 알림을 예약해요.
- Google Calendar의 이벤트가 시작되기 전에 푸시 알림을 보내요.
- Twitter의 "User Tweet" 트리거로 트윗도 푸시 알림으로 보내요.
- 소셜 미디어 활동을 앱 사용자와 공유하는 방법은 이 외에도 많아요. 다음과 같은 상황에서 알림을 보내 보세요.
- ... YouTube 동영상을 업로드할 때
- ... Twitch에서 라이브 방송을 시작할 때
- ... Instagram에 게시물을 올릴 때
Zapier와 webtoapp.design을 함께 활용하는 멋진 방법을 찾으셨나요? 알려 주시면 목록에 추가할게요!
