> ## Documentation Index > Fetch the complete documentation index at: https://docs.cocobase.cc/llms.txt > Use this file to discover all available pages before exploring further. # Email Integration > Configure email templates and automation for your Cocobase project # Email Integration Set up automated emails for user authentication, notifications, and custom workflows in your Cocobase project. All email configurations are managed through the Cocobase Dashboard. No code required for setup. ## Overview Cocobase email features: * **Transactional emails** - Welcome, verification, password reset * **Custom templates** - Design emails with HTML/CSS * **Template variables** - Personalize with user data * **Email triggers** - Automated sends based on events * **SMTP configuration** - Use your own email provider * **Email analytics** - Track opens, clicks, deliveries *** ## Default Email Templates Cocobase provides pre-built templates for common scenarios: ### 1. Welcome Email Sent when a new user registers: * Triggered automatically on registration * Includes: username, account details, getting started tips * Can be customized in dashboard ### 2. Email Verification Sent to verify user's email address: * Contains verification link * Link expires after 24 hours * Automatic retry if not verified ### 3. Password Reset Sent when user requests password reset: * Contains secure reset link * Link expires after 1 hour * One-time use only ### 4. Password Changed Confirmation when password is successfully changed: * Includes timestamp and location * Security alert ### 5. Two-Factor Authentication 2FA code delivery: * 6-digit verification code * Expires after 10 minutes *** ## Email Configuration ### Step 1: Access Email Settings 1. Log in to [Cocobase Dashboard](https://cocobase.cc) 2. Select your project 3. Navigate to **Settings** → **Email Configuration** 4. View email provider and templates ### Step 2: Choose Email Provider Cocobase supports multiple email providers: #### Option 1: Cocobase Email (Default) * **Free tier**: 100 emails/day * **Pro plan**: 10,000 emails/day * **No configuration needed** * Sent from: `noreply@cocobase.cc` #### Option 2: Custom SMTP Use your own email service: 1. Click **Custom SMTP** 2. Enter SMTP credentials: * **Host**: smtp.yourprovider.com * **Port**: 587 (or 465 for SSL) * **Username**: Your email or API key * **Password**: Your password or API secret * **From Email**: [sender@yourdomain.com](mailto:sender@yourdomain.com) * **From Name**: Your App Name 3. Click **Test Connection** 4. Save settings **Supported Providers:** * SendGrid * Mailgun * Amazon SES * SMTP2GO * Gmail (for testing only) * Any SMTP server #### Option 3: Email API Integration Integrate with email service APIs: 1. Select **API Integration** 2. Choose provider: * SendGrid * Mailgun * Postmark * Amazon SES 3. Enter API credentials 4. Configure sending domain 5. Test and save *** ## Customizing Email Templates ### Step 1: Select Template 1. Email Configuration → **Templates** 2. Choose template to customize: * Welcome Email * Email Verification * Password Reset * Custom Template ### Step 2: Edit Template **Subject Line:** ``` Welcome to {app_name}, {user_name}! ``` **HTML Body:** ```html theme={null}

Welcome to {app_name}!

Hi {user_name},

Thank you for joining {app_name}! We're excited to have you on board.

Your account has been successfully created with the email: {user_email}

To get started, click the button below:

Get Started

If you have any questions, feel free to reach out to our support team.

Best regards,
The {app_name} Team

You received this email because you signed up for {app_name}.

© 2024 {app_name}. All rights reserved.

``` ### Step 3: Available Variables Use these variables in your templates: **User Variables:** * `{user_name}` - User's full name * `{user_email}` - User's email address * `{user_id}` - User's unique ID * `{user_username}` - Username * `{user_role}` - User's role * Any custom user field: `{user.custom_field}` **App Variables:** * `{app_name}` - Your project name * `{app_url}` - Your application URL * `{support_email}` - Support email address **Action Variables:** * `{verification_link}` - Email verification URL * `{reset_link}` - Password reset URL * `{verification_code}` - 2FA or verification code * `{magic_link}` - Passwordless login link **System Variables:** * `{current_date}` - Current date * `{current_time}` - Current time * `{current_year}` - Current year ### Step 4: Preview & Test 1. Click **Preview** to see rendered email 2. Send test email to yourself 3. Check inbox and spam folder 4. Verify links work correctly 5. Test on mobile and desktop 6. Save template when satisfied *** ## Custom Email Triggers Send emails based on custom events and conditions. ### Step 1: Create Trigger 1. Email Configuration → **Triggers** 2. Click **Create Trigger** 3. Configure trigger: **Trigger Name:** Order Confirmation **Event:** Document Created **Collection:** orders **Conditions:** ```json theme={null} { "status": "completed", "payment_status": "paid" } ``` ### Step 2: Configure Email **Recipient:** `{document.customer_email}` **Subject:** Order #{document.order_number} Confirmed **Template:** Select or create custom template **Template Variables:** ```json theme={null} { "order_number": "{document.order_number}", "order_total": "{document.total}", "items": "{document.items}", "delivery_date": "{document.delivery_date}" } ``` ### Step 3: Test Trigger 1. Click **Test Trigger** 2. Provide sample document data 3. Check email delivery 4. Verify template rendering 5. Activate trigger *** ## Email Examples ### Welcome Email ```html theme={null}

Welcome to TaskFlow, {user_name}!

You're now part of a community of productive people.

Complete Your Profile

What's Next?

Need help? Visit our Help Center.

``` ### Password Reset ```html theme={null}

Reset Your Password

Hi {user_name},

We received a request to reset your password for {app_name}.

Reset Password

This link expires in 1 hour.

If you didn't request this, please ignore this email. Your password will remain unchanged.

🔒 For security reasons, this link can only be used once.

``` ### Order Confirmation ```html theme={null}

Order Confirmed!

Hi {user_name},

Thank you for your order! We've received your payment and are processing your order.

Order #{order_number}

Order Date: {order_date}

Total: ${order_total}

Expected Delivery: {delivery_date}

Items Ordered:

{#each items}

{item.name} x {item.quantity} - ${item.price}

{/each}
Track Order
``` ### Weekly Digest ```html theme={null}

Your Weekly Summary

Hi {user_name},

Here's what happened this week:

{stats.tasks_completed}

Tasks Completed

{stats.projects_active}

Active Projects

{stats.team_members}

Team Members

Top Projects:

{#each top_projects}

{project.name}

{project.progress}% complete • {project.tasks_done}/{project.tasks_total} tasks

{/each}
View Dashboard
``` *** ## Email Best Practices * Use clean, minimal design * Focus on one call-to-action * Avoid large images (slow loading) * Test on mobile devices * Use system fonts for better rendering ```html theme={null}

Hi {user_name}, your order #{order_number} has been shipped!

Your order has been shipped.

``` Use user data to make emails relevant and engaging. ```html theme={null} Verify Email Address

Click here to continue.

``` ```css theme={null} /* Mobile-friendly styles */ @media only screen and (max-width: 600px) { .container { width: 100% !important; padding: 10px !important; } .button { display: block !important; width: 100% !important; } h1 { font-size: 24px !important; } } ``` 1. Send test emails to yourself 2. Check on different email clients: * Gmail * Outlook * Apple Mail * Mobile apps 3. Verify all links work 4. Check spam score 5. Review on mobile Don't use: * ALL CAPS IN SUBJECT LINES * Excessive exclamation marks!!! * Spam trigger words (FREE, WINNER, ACT NOW) * Suspicious links * Large attachments Do: * Use clear subject lines * Include unsubscribe link * Authenticate your domain * Maintain clean email list *** ## Programmatic Email Sending While most emails are triggered automatically, you can also send custom emails from your code. ```javascript theme={null} import { Cocobase } from 'cocobase'; const db = new Cocobase({ apiKey: 'your-api-key' }); // Send custom email await db.email.send({ to: 'user@example.com', subject: 'Your Report is Ready', template: 'report-ready', variables: { user_name: 'John', report_name: 'Monthly Analytics', report_url: 'https://app.example.com/reports/123' } }); ``` ```typescript theme={null} interface EmailVariables { user_name: string; report_name: string; report_url: string; } await db.email.send({ to: 'user@example.com', subject: 'Your Report is Ready', template: 'report-ready', variables: { user_name: 'John', report_name: 'Monthly Analytics', report_url: 'https://app.example.com/reports/123' } }); ``` ```dart theme={null} await db.email.send( to: 'user@example.com', subject: 'Your Report is Ready', template: 'report-ready', variables: { 'user_name': 'John', 'report_name': 'Monthly Analytics', 'report_url': 'https://app.example.com/reports/123' } ); ``` ```python theme={null} db.email.send( to='user@example.com', subject='Your Report is Ready', template='report-ready', variables={ 'user_name': 'John', 'report_name': 'Monthly Analytics', 'report_url': 'https://app.example.com/reports/123' } ) ``` *** ## Email Analytics Track email performance in the dashboard. ### Available Metrics 1. **Delivery Rate** * Total emails sent * Successfully delivered * Bounced emails * Failed deliveries 2. **Engagement** * Open rate * Click-through rate * Time to first open * Device/client breakdown 3. **Issues** * Bounce rate (hard/soft) * Spam complaints * Unsubscribes * Blocked emails ### Viewing Analytics 1. Dashboard → Email → Analytics 2. Select date range 3. Filter by template 4. View detailed reports 5. Export data (CSV) ### Improving Deliverability **If open rates are low:** * Improve subject lines * Send at better times * Segment your audience * A/B test templates **If bounce rate is high:** * Clean email list * Remove invalid addresses * Verify email domains * Check SMTP configuration **If marked as spam:** * Add unsubscribe link * Authenticate domain (SPF/DKIM) * Reduce send frequency * Improve email content *** ## Domain Authentication Improve email deliverability by authenticating your domain. ### Step 1: Add DNS Records 1. Dashboard → Email → Domain Authentication 2. Click **Authenticate Domain** 3. Enter your domain: `yourdomain.com` 4. Copy provided DNS records: **SPF Record:** ``` Type: TXT Name: @ Value: v=spf1 include:cocobase.cc ~all ``` **DKIM Record:** ``` Type: TXT Name: cocobase._domainkey Value: [provided by Cocobase] ``` **DMARC Record:** ``` Type: TXT Name: _dmarc Value: v=DMARC1; p=none; rua=mailto:dmarc@yourdomain.com ``` ### Step 2: Add Records to DNS Provider 1. Log in to your DNS provider (Cloudflare, Namecheap, etc.) 2. Add the records exactly as shown 3. Wait for DNS propagation (up to 48 hours) ### Step 3: Verify 1. Return to Cocobase dashboard 2. Click **Verify Domain** 3. Wait for confirmation 4. Start sending authenticated emails *** ## Troubleshooting ### Emails Not Being Received **Check:** 1. Spam/junk folder 2. Email configuration in dashboard 3. SMTP credentials are correct 4. Email provider status 5. Recipient email is valid ### Links Not Working **Solutions:** 1. Verify variable syntax: `{verification_link}` 2. Check template preview 3. Test with real data 4. Ensure app URL is configured correctly ### Template Not Rendering **Common Issues:** 1. Invalid HTML syntax 2. Missing closing tags 3. Undefined variables 4. CSS compatibility issues **Solutions:** * Use HTML validator * Test template preview * Check all variables are defined * Use inline CSS *** ## Next Steps Set up user authentication Configure user roles and permissions Automate workflows with functions Learn optimization tips