layout: default title: Developer Resources permalink: /developer-resources/

Developer Resources

Complete development resources for integrating with the ViewFi.

Quick Start

Get up and running with our platform in minutes:

1. Get API Key - Generate your authentication token
2. Review API Docs - Understand available endpoints
3. Try Examples - Test with sample code
4. Deploy - Integrate into your application

API Documentation

Authentication

const headers = {
  'Authorization': 'Bearer YOUR_API_KEY',
  'Content-Type': 'application/json'
};

Basic Integration

// Fetch campaign data
const campaign = await fetch(`/api/campaigns/${campaignId}`, { headers });

// Track video view
await fetch(`/api/campaigns/${campaignId}/view`, {
  method: 'POST',
  headers
});

// Process reward claim
await fetch(`/api/campaigns/${campaignId}/claim`, {
  method: 'POST',
  headers,
  body: JSON.stringify({ userId, email })
});

SDKs and Libraries

JavaScript SDK

npm install @viewfi/widget-sdk

import { ViewFiWidget } from '@viewfi/widget-sdk';

const widget = new ViewFiWidget({
  apiKey: 'your-api-key',
  campaignId: 'campaign-123'
});

widget.on('videoComplete', (data) => {
  console.log('Video completed:', data);
});

widget.on('rewardClaimed', (data) => {
  console.log('Reward claimed:', data);
});

React Components

import { VideoWidget } from '@viewfi/react-components';

function MyApp() {
  return (
    <VideoWidget
      campaignId="campaign-123"
      onComplete={(data) => console.log('Complete:', data)}
      onClaim={(data) => console.log('Claimed:', data)}
    />
  );
}

Platform Integration

Roblox

-- Server Script
local HttpService = game:GetService("HttpService")
local Players = game:GetService("Players")

local API_KEY = "your-api-key"
local CAMPAIGN_ID = "campaign-123"

function processReward(player, rewardCode)
    -- Verify reward with ViewFi API
    local success, response = pcall(function()
        return HttpService:RequestAsync({
            Url = "https://video-rewards.com/api/verify-reward",
            Method = "POST",
            Headers = {
                ["Authorization"] = "Bearer " .. API_KEY,
                ["Content-Type"] = "application/json"
            },
            Body = HttpService:JSONEncode({
                code = rewardCode,
                playerId = player.UserId
            })
        })
    end)
    
    if success and response.Success then
        -- Award in-game reward
        awardPlayerReward(player, response.reward)
    end
end

Unity

using UnityEngine;
using System.Collections;

public class ViewFiIntegration : MonoBehaviour 
{
    private string apiKey = "your-api-key";
    private string baseUrl = "https://video-rewards.com/api";
    
    public IEnumerator ClaimReward(string campaignId, string userId)
    {
        var request = new UnityWebRequest($"{baseUrl}/campaigns/{campaignId}/claim", "POST");
        request.SetRequestHeader("Authorization", $"Bearer {apiKey}");
        request.SetRequestHeader("Content-Type", "application/json");
        
        string json = JsonUtility.ToJson(new { userId = userId });
        request.uploadHandler = new UploadHandlerRaw(System.Text.Encoding.UTF8.GetBytes(json));
        request.downloadHandler = new DownloadHandlerBuffer();
        
        yield return request.SendWebRequest();
        
        if (request.result == UnityWebRequest.Result.Success)
        {
            Debug.Log("Reward claimed successfully");
        }
    }
}

Webhook Integration

Setup

Configure webhooks in your dashboard to receive real-time notifications.

Event Types

• video.completed - User finished watching video
• reward.claimed - User successfully claimed reward
• campaign.updated - Campaign status changed

Example Handler

app.post('/webhook', (req, res) => {
  const event = req.body;
  
  switch(event.type) {
    case 'video.completed':
      console.log('Video completed:', event.data);
      break;
      
    case 'reward.claimed':
      console.log('Reward claimed:', event.data);
      // Process reward in your system
      break;
      
    case 'campaign.updated':
      console.log('Campaign updated:', event.data);
      break;
  }
  
  res.status(200).send('OK');
});

Code Examples

Widget Embedding

<!DOCTYPE html>
<html>
<head>
    <title>Video Widget Demo</title>
</head>
<body>
    <div id="video-widget"></div>
    
    <script>
        // Load widget
        const iframe = document.createElement('iframe');
        iframe.src = 'https://video-rewards.com/widget/campaign-123';
        iframe.width = '100%';
        iframe.height = '600px';
        iframe.frameBorder = '0';
        
        document.getElementById('video-widget').appendChild(iframe);
        
        // Listen for messages
        window.addEventListener('message', (event) => {
            if (event.data.type === 'videoComplete') {
                console.log('Video completed!');
            }
        });
    </script>
</body>
</html>

Custom Analytics

class VideoAnalytics {
    constructor(apiKey, campaignId) {
        this.apiKey = apiKey;
        this.campaignId = campaignId;
        this.startTime = Date.now();
    }
    
    async trackEvent(eventType, data = {}) {
        try {
            await fetch('/api/analytics/track', {
                method: 'POST',
                headers: {
                    'Authorization': `Bearer ${this.apiKey}`,
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    campaignId: this.campaignId,
                    eventType,
                    timestamp: Date.now(),
                    ...data
                })
            });
        } catch (error) {
            console.error('Analytics tracking failed:', error);
        }
    }
    
    async trackVideoProgress(percentage) {
        await this.trackEvent('video_progress', { percentage });
    }
    
    async trackRewardClaim(rewardData) {
        await this.trackEvent('reward_claim', rewardData);
    }
}

Testing

Test Mode

Use test mode for safe development:

const widget = new ViewFiWidget({
    apiKey: 'your-api-key',
    campaignId: 'campaign-123',
    testMode: true  // Enables test mode
});

Mock Responses

Test with mock data:

// Mock successful reward claim
const mockReward = {
    type: 'ugc_coupon',
    code: 'TEST123',
    value: '10% OFF',
    expiresAt: '2024-12-31T23:59:59Z'
};

Security

API Key Management

• Never expose API keys in client-side code
• Use environment variables
• Rotate keys regularly
• Use different keys for different environments

CORS Configuration

Configure CORS for web integration:

// Server configuration
app.use(cors({
    origin: ['https://yourdomain.com'],
    credentials: true
}));

Rate Limits

Limits

• API Calls: 1000/hour per key
• Widget Loads: 10,000/day per domain
• Webhooks: 100/minute per endpoint

Best Practices

• Implement retry logic with exponential backoff
• Cache responses when possible
• Use bulk endpoints for multiple operations

Support

Community

• Discord: Join our developer community
• GitHub: Report issues and contribute
• Stack Overflow: Tag questions with viewfi

Documentation

• API Reference - Complete API docs
• Troubleshooting - Common issues
• Examples Repository - Sample code

Professional Support

• Email: [email protected]
• Priority Support: Available for enterprise customers
• Custom Integration: Consulting services available

Need help? Our team is here to support your integration journey!