AI Randevu Web Sitenize E-posta Bildirimleri Ekleyin

Bu rehber, AI Randevu Web Sitesi projesini otomatik e-posta bildirimleriyle yükseltir. Randevu web sitesini henüz oluşturmadıysanız, önce ana rehberle başlayın.

AI ile Randevu Web Sitesi Oluşturun

Ana rehberi açın

MAIN GUIDE

https://profitstudio.app/video/build-booking-website-ai

Resend Hesabınızı Oluşturun ve Yapılandırın

Resend'i açın

https://resend.com/

Resend hesabı oluşturun Resend API anahtarı oluşturun API anahtarını kopyalayıp güvenli bir yerde saklayın

ÖNEMLİ

Resend API anahtarını gizli tutun. Asla frontend koduna eklemeyin ve herkese açık şekilde paylaşmayın.

Gönderim Alan Adınızı Ekleyin ve Doğrulayın

Rezervasyon web sitenizin alan adını ekleyin En yakın bölgeyi seçin DNS kayıtlarını Resend'den kopyalayın Kayıtları alan adı sağlayıcınıza ekleyin Resend'e dönün ve alan adının doğrulandığını onaylayın

DNS doğrulaması, alan adı sağlayıcınıza bağlı olarak birkaç dakika veya daha uzun sürebilir.

Rezervasyon E-postası Edge Function'ını Oluşturun

Supabase'i açın

https://supabase.com/?utm_source=partner&utm_medium=social&utm_campaign=supasquad&dub_id=faVfKdcLWvKCbYNp

Supabase projenizi açın Edge Functions'ı açın Tarayıcı düzenleyicisini kullanarak yeni bir fonksiyon oluşturun Fonksiyona `send-booking-email` adını verin Varsayılan başlangıç kodunu silin

Fonksiyon Kodunu Özelleştirin ve Ekleyin

Sahibin e-posta adresini girin Doğrulanmış Resend alan adını girin Gönderen işletme adını girin Gerekirse e-posta şablonlarını özelleştirin Oluşturulan fonksiyon kodunu kopyalayıp yapıştırın

Randevu E-postası Fonksiyonu

import { serve } from "https://deno.land/std/http/server.ts"; serve(async (req) => { try { const body = await req.json(); const record = body.record || {}; const resendKey = Deno.env.get("RESEND_API_KEY"); const supabaseUrl = Deno.env.get("SUPABASE_URL"); const supabaseServiceRoleKey = Deno.env.get("SUPABASE_SERVICE_ROLE_KEY"); if (!resendKey) { return new Response( JSON.stringify({ error: "Missing RESEND_API_KEY secret" }), { status: 500, headers: { "Content-Type": "application/json" }, } ); } const ownerEmail = "YOUR_OWNER_EMAIL"; const customerEmail = record.email || ""; const customerName = record.full_name || record.name || "Customer"; const phone = record.phone || ""; const appointmentDate = record.appointment_date || record.date || ""; const startTime = record.start_time || record.time || ""; const endTime = record.end_time || ""; const notes = record.notes || ""; const status = record.status || "New"; let serviceName = record.service_name || record.service || record.service_title || ""; // If the appointment only has service_id, fetch the service name from the services table if (!serviceName && record.service_id && supabaseUrl && supabaseServiceRoleKey) { try { const serviceId = encodeURIComponent(record.service_id); const serviceResponse = await fetch( `${supabaseUrl}/rest/v1/services?id=eq.${serviceId}&select=name`, { method: "GET", headers: { apikey: supabaseServiceRoleKey, Authorization: `Bearer ${supabaseServiceRoleKey}`, "Content-Type": "application/json", }, } ); const serviceData = await serviceResponse.json(); if (Array.isArray(serviceData) && serviceData.length > 0) { serviceName = serviceData[0].name || ""; } } catch (_serviceError) { serviceName = ""; } } if (!serviceName) { serviceName = "Appointment"; } // 1) Email to business owner const ownerResponse = await fetch("https://api.resend.com/emails", { method: "POST", headers: { Authorization: `Bearer ${resendKey}`, "Content-Type": "application/json", }, body: JSON.stringify({ from: "Bookings <bookings@YOUR_DOMAIN_NAME>", to: [ownerEmail], subject: "OWNER_NOTIFICATION_SUBJECT", html: ` <h2>OWNER_NOTIFICATION_HEADING</h2> <p>OWNER_NOTIFICATION_INTRO</p> <p><b>Customer Name:</b> ${customerName}</p> <p><b>Email:</b> ${customerEmail}</p> <p><b>Phone:</b> ${phone}</p> <p><b>Service:</b> ${serviceName}</p> <p><b>Date:</b> ${appointmentDate}</p> <p><b>Start Time:</b> ${startTime}</p> <p><b>End Time:</b> ${endTime}</p> <p><b>Notes:</b> ${notes}</p> <p><b>Status:</b> ${status}</p> `, }), }); const ownerData = await ownerResponse.json(); // 2) Email to customer let customerData = null; if (customerEmail) { const customerResponse = await fetch("https://api.resend.com/emails", { method: "POST", headers: { Authorization: `Bearer ${resendKey}`, "Content-Type": "application/json", }, body: JSON.stringify({ from: "YOUR_BUSINESS_NAME <bookings@YOUR_DOMAIN_NAME>", to: [customerEmail], subject: "CUSTOMER_CONFIRMATION_SUBJECT", html: ` <h2>CUSTOMER_CONFIRMATION_HEADING</h2> <p>Hi ${customerName},</p> <p>CUSTOMER_CONFIRMATION_INTRO</p> <p><b>Service:</b> ${serviceName}</p> <p><b>Date:</b> ${appointmentDate}</p> <p><b>Start Time:</b> ${startTime}</p> <p><b>End Time:</b> ${endTime}</p> <p>If you need to make any changes, please contact us before your appointment.</p> <p>CUSTOMER_CONFIRMATION_CLOSING</p> `, }), }); customerData = await customerResponse.json(); } return new Response( JSON.stringify({ success: true, ownerEmailSent: ownerData, customerEmailSent: customerData, }), { headers: { "Content-Type": "application/json" }, } ); } catch (error) { return new Response( JSON.stringify({ success: false, error: String(error), }), { status: 500, headers: { "Content-Type": "application/json" }, } ); } });

İşletme Sahibi E-postası

owner@example.com

Doğrulanmış Resend Alan Adı

yourdomain.com

Gönderen İşletme Adı

Bright Diş Kliniği

İşletme Sahibi E-postası Konusu

İşletme Sahibi E-postası Başlığı

İşletme Sahibi E-postası Giriş Metni

Müşteri E-postası Konusu

Müşteri E-postası Başlığı

Müşteri E-postası Giriş Metni

Müşteri E-postası Kapanış Metni

Fonksiyonu Yayınlayın ve Yapılandırın

Fonksiyonu yayınlayın Fonksiyon ayarlarını açın `Verify JWT With Legacy Secret` seçeneğini kapatın Değişiklikleri kaydedin Webhook kurulumu için fonksiyonun endpoint URL'sini kopyalayıp saklayın

ÖNEMLİ

Database Webhook'un fonksiyonu çağırabilmesi için “Verify JWT With Legacy Secret” seçeneğini kapatın.

Resend API Anahtarını Supabase Secret Olarak Ekleyin

Edge Function Secrets bölümünü açın Yeni bir secret oluşturun Adını `RESEND_API_KEY` olarak ayarlayın Resend API anahtarını yapıştırın Secret'ı kaydedin

ÖNEMLİ

Secret adını tam olarak `RESEND_API_KEY` şeklinde kullanın. En küçük bir yazım hatası fonksiyonun Resend'e erişmesini engeller.

Rezervasyon E-postası Webhook'unu Oluşturun

Yeni bir randevu eklendiğinde rezervasyon e-posta fonksiyonunu tetikleyin.

Integrations Database Webhooks

Database Webhooks bölümünü açın Database Webhooks'u etkinleştirin Yeni bir webhook oluşturun Adını `send-booking-email-webhook` koyun `public.appointments` tablosunu seçin Olay olarak `Insert` seçin Tür olarak `HTTP Request` bırakın İstek yöntemi olarak `POST` kullanın Edge Function endpoint URL'sini yapıştırın Webhook'u oluşturun

Rezervasyon E-posta Akışının Tamamını Test Edin

Rezervasyon akışının tamamını test edin ve her iki e-postanın da doğru şekilde iletildiğini doğrulayın.

Yayındaki rezervasyon web sitesini açın Test amaçlı bir randevu gönderin Rezervasyonun Supabase'e kaydedildiğini doğrulayın Müşteriye giden onay e-postasını kontrol edin İşletme sahibine giden bildirim e-postasını kontrol edin Rezervasyon bilgilerinin her iki e-postada da doğru olduğunu doğrulayın Rezervasyonun yönetim panelinde göründüğünü doğrulayın