Skip to main content

Cloudflare + Google Cloud Storage Hosting

Learn how to host your avatar on your own domain using Google Cloud Storage and Cloudflare.

Overview​

This tutorial will guide you through hosting your avatar embed on your own website using:

  • Google Cloud Storage for static file hosting
  • Cloudflare for DNS management and CDN
  • Custom domain like https://avatar.mywebsite.com

Prerequisites​

  • A Google Cloud Platform account
  • A Cloudflare account
  • A domain name managed by Cloudflare
  • Your avatar embed code from oktalkto.me

Step 1: Create Google Cloud Storage Bucket​

1.1 Access Google Cloud Console​

  1. Go to Google Cloud Console
  2. Create a new project or select an existing one
  3. Navigate to Storage > Browser

1.2 Create a New Bucket​

Critical: For static website hosting, the bucket name must match your domain name exactly.

  1. Click Create bucket
  2. Enter bucket details:
    • Bucket name: avatar.mywebsite.com (must match your domain exactly)
    • Location type: Select Region for better performance
    • Location: Choose closest to your users
    • Storage class: Standard
  3. Under Access control:
    • Uncheck Enforce public access prevention
    • Select Fine-grained access control
  4. Click Create

1.3 Configure Bucket for Web Hosting​

  1. Select your newly created bucket
  2. Go to Permissions tab
  3. Click Grant Access
  4. Add new principals:
    • New principals: allUsers
    • Role: Storage Object Viewer
  5. Click Save

Step 2: Create Your Avatar Website​

2.1 Create index.html File​

Create a local file called index.html with the following content:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Avatar</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
            font-family: 'Arial', sans-serif;
            overflow: hidden;
        }
        
        .avatar-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            border: none;
            background: transparent;
        }
        
        .loading {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: #00ffff;
            font-size: 18px;
            z-index: 1000;
        }
        
        .loading::after {
            content: '';
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 2px solid #00ffff;
            border-radius: 50%;
            border-top-color: transparent;
            animation: spin 1s linear infinite;
            margin-left: 10px;
        }
        
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        
        @media (max-width: 768px) {
            .avatar-container {
                width: 100vw;
                height: 100vh;
            }
        }
    </style>
</head>
<body>
    <div class="loading" id="loading">Loading Avatar...</div>
    
    <!-- Replace YOUR_API_KEY and YOUR_PROFILE_ID with your actual values -->
    <iframe 
        class="avatar-container" 
        src="https://oktalkto.me/embed.html?apiKey=YOUR_API_KEY&profileId=YOUR_PROFILE_ID"
        frameborder="0"
        allow="microphone; camera; autoplay; encrypted-media; fullscreen"
        allowfullscreen
        onload="document.getElementById('loading').style.display='none'">
    </iframe>
    
    <script>
        // Optional: Add custom tracking or analytics
        console.log('Avatar loaded successfully');
        
        // Handle iframe communication (optional)
        window.addEventListener('message', function(event) {
            if (event.origin !== 'https://oktalkto.me') return;
            
            // Handle messages from avatar if needed
            console.log('Message from avatar:', event.data);
        });
    </script>
</body>
</html>

2.2 Customize Your Avatar​

  1. Replace YOUR_API_KEY with your actual API key from your avatar platform
  2. Replace YOUR_PROFILE_ID with your actual profile ID from your avatar settings
  3. You can get these values from your avatar profile page
  4. Customize the styling, colors, and branding as needed

Step 3: Upload to Google Cloud Storage​

3.1 Upload Files​

  1. In Google Cloud Console, go to your bucket
  2. Click Upload files
  3. Select your index.html file
  4. Click Upload

3.2 Set Object Permissions​

  1. Click on the uploaded index.html file
  2. Go to Permissions tab
  3. Click Grant Access
  4. Add new principals:
    • New principals: allUsers
    • Role: Storage Object Viewer
  5. Click Save

3.3 Configure Main Page​

  1. In your bucket, click Website configuration
  2. Set:
    • Main page: index.html
    • 404 page: index.html (optional)
  3. Click Save

Step 4: Configure Cloudflare DNS​

4.1 Add CNAME Record​

  1. Log in to your Cloudflare dashboard
  2. Select your domain
  3. Go to DNS > Records
  4. Click Add record
  5. Configure:
    • Type: CNAME
    • Name: avatar (for avatar.mywebsite.com)
    • Target: c.storage.googleapis.com
    • Proxy status: ✅ Proxied (orange cloud)
  6. Click Save

4.2 Add Page Rule for GCS​

  1. In Cloudflare, go to Rules > Page Rules
  2. Click Create Page Rule
  3. Configure:
    • URL: avatar.mywebsite.com/*
    • Settings:
      • Host Header Override: storage.googleapis.com
      • Resolve Override: c.storage.googleapis.com
      • Path: /avatar.mywebsite.com/$1
  4. Click Save and Deploy

Step 5: Test Your Setup​

5.1 Verify DNS Propagation​

  1. Wait 5-10 minutes for DNS propagation
  2. Test your URL: https://avatar.mywebsite.com
  3. You should see your avatar loading

5.2 Test Different Devices​

  • Desktop browsers
  • Mobile devices
  • Different network connections

Step 6: Advanced Configuration (Optional)​

6.1 Custom Domain SSL​

Cloudflare automatically provides SSL certificates for your custom domain.

6.2 Performance Optimization​

Add these Cloudflare optimizations:

  1. Speed > Optimization
    • Enable Auto Minify for HTML, CSS, JS
    • Enable Brotli compression
    • Enable Early Hints

6.3 Security Settings​

  1. Security > Settings
    • Set Security Level: Medium
    • Enable Bot Fight Mode
    • Configure Rate Limiting if needed

Troubleshooting​

Common Issues​

Avatar not loading:

  • Check if your API key and profile ID are correct
  • Verify CORS settings in avatar profile
  • Ensure domain is whitelisted in your avatar platform

DNS not resolving:

  • Wait up to 24 hours for full propagation
  • Check Cloudflare DNS records
  • Verify Page Rule configuration

Permission errors:

  • Ensure bucket is publicly accessible
  • Check object-level permissions
  • Verify allUsers has Storage Object Viewer role

Getting Help​

If you encounter issues:

  1. Check browser console for errors
  2. Test with different browsers
  3. Verify all configuration steps
  4. Contact support with specific error messages

Cost Considerations​

  • Google Cloud Storage: ~$0.02 per GB/month
  • Cloudflare: Free tier sufficient for most use cases
  • Domain: Varies by registrar

Next Steps​

  • Set up multiple avatars with different subdomains
  • Implement custom analytics tracking
  • Add authentication for private avatars
  • Configure custom branding and styling