1. Overview

1.1 About Clivo

Clivo is a specialized email design platform that enables users to create professional, responsive email campaigns quickly and efficiently. The platform offers:

Figma to Email Converter: Transform Figma designs into production-ready HTML emails with pixel-perfect accuracy.

1.2 Key Features

Figma design to HTML email conversion
Direct integration with Klaviyo email marketing platform
Brand kit management for consistent branding
Template library with industry-specific designs
Real-time email preview and editing
Credit-based usage system

1.3 Platform Requirements

Modern web browser (Chrome, Firefox, Safari, Edge)
Active internet connection
Klaviyo account (for deployment features)
Figma account (for Figma converter feature)

2. Sign Up & Account Setup

2.1 Creating an Account

Visit Registration Page

Navigate to https://app.clivo.email/register

Enter Your Information

Provide the following details:

Full Name
Email Address
Password (minimum 8 characters, must include uppercase, number, and special character)
Company Name (optional)

Accept Terms and Conditions

Review and accept the Terms of Service and Privacy Policy

Verify Email Address

Check your email inbox for a verification link. Click the link to activate your account.

Complete Profile Setup

Upon first login, you will receive 100 free credits to explore the platform.

2.2 Setting Up Brand Kit

To ensure consistent branding across all generated emails, complete your brand kit setup:

Navigate to Settings → Brand Kit
Upload your company logo (PNG, JPG, max 50KB)
Select brand colors (primary, secondary, accent colors)
Define brand fonts
Enter company information (name, tagline, social media links)
Save your brand kit

Note: Brand kit information will automatically populate in all AI-generated emails and can be applied to Figma conversions.

3. Using Figma to Email Converter

3.1 Overview

The Figma Converter feature allows you to transform your Figma email designs into responsive, email-client-compatible HTML code. This feature maintains design fidelity while ensuring compatibility across major email clients.

3.2 Preparing Your Figma Design

Design Requirements:

Frame width: 600px (standard email width)
Use web-safe fonts or system fonts
Export images in appropriate formats (PNG, JPG)
Organize layers with clear naming conventions

3.3 Conversion Process

Access Figma Converter

From the dashboard, click "Figma Converter" in the navigation menu.

Connect Figma Account

If not already connected, click "Connect Figma" and authorize Clivo to access your Figma files.

Select Figma File

Browse your Figma workspace and select the design you want to convert.

Choose Frame/Artboard

Select the specific frame or artboard containing your email design.

Configure Conversion Settings

Select target email clients (Gmail, Outlook, Apple Mail, etc.)
Choose image optimization level
Enable/disable responsive design

Start Conversion

Click "Convert to Email". The conversion process typically takes 30-60 seconds.

Cost: 10 credits per conversion

Review and Edit

Once converted, review the email in the preview panel. Make any necessary adjustments using the built-in editor.

Save Email

Save the converted email to your library for future use or deployment.

3.4 Best Practices

Use standard web colors (avoid gradients when possible)
Keep file size under 100KB for optimal loading
Test in multiple email clients before sending
Use alt text for all images
Include a plain text version for accessibility

4. Connecting Klaviyo Account

4.1 Prerequisites

Active Klaviyo account
Admin access to your Klaviyo workspace
Active Clivo account

4.2 Connection Process

Navigate to Settings

From the Clivo dashboard, click Settings → Integrations

Locate Klaviyo Integration

Find the Klaviyo card in the Available Integrations section.

Click "Connect Klaviyo Account"

This will initiate the OAuth authorization flow.

Enter Account Name

Provide a descriptive name for this connection (e.g., "Primary Marketing Account").

Authorize in Klaviyo

You will be redirected to Klaviyo's authorization page. Review the requested permissions:

Read account information
Read and write campaigns
Read and write templates
Read lists and segments
Read profiles

Click "Allow" to grant permissions.

Confirmation

You will be redirected back to Clivo. A success message will confirm the connection.

4.3 Managing Connected Accounts

You can connect multiple Klaviyo accounts. To manage them:

View: All connected accounts appear in Settings → Integrations
Disconnect: Click "Disconnect" next to any account to revoke access
Reconnect: If a connection expires, click "Reconnect" to reauthorize

Security Note: Clivo uses industry-standard OAuth 2.0 with PKCE for secure authentication. Your Klaviyo credentials are never stored on our servers.

5. Exporting Emails to Klaviyo

5.1 Export Process

Select Email

From your email library, open the email you want to export to Klaviyo.

Click "Deploy to Platform"

In the email editor, click the "Deploy" button in the top-right corner.

Select Klaviyo

Choose "Klaviyo" from the list of available platforms.

Choose Account

Select which connected Klaviyo account to use for deployment.

Configure Deployment Settings

Template Name: Name for the template in Klaviyo
From Email: Sender email address
From Name: Sender name
Subject Line: Email subject (can be edited in Klaviyo)
Preheader Text: Preview text for email clients

Deploy

Click "Deploy to Klaviyo". The email will be created as a template in your Klaviyo account.

Confirmation

Upon successful deployment, you will receive:

Success notification
Direct link to the template in Klaviyo
Template ID for reference

5.2 Using Deployed Templates in Klaviyo

Log in to your Klaviyo account
Navigate to Content → Templates
Find your deployed template by name
Use the template to create campaigns or flows

6. Credit System & Purchase

6.1 How Credits Work

Clivo uses a credit-based system for platform features. Each action consumes a specific number of credits:

Action	Credit Cost
Figma to Email Conversion	Upto 70 credits ( Email Based )
Platform Deployment	0 credits (free)

6.2 Checking Credit Balance

Your current credit balance is always visible:

Dashboard header (top-right corner)
Settings → Billing → Credits section
Before each credit-consuming action

6.3 Purchasing Credits

Navigate to Credit Purchase

Click Settings → Billing → Purchase Credits

Select Credit Package

Choose from available packages:

Basic Pack: 300 credits - $29
Standard Pack: 500 credits - $39
Pro Pack: 1000 credits - $99
Premium Pack: 2000 credits - $199
Enterprise Pack: 5000 credits - $499

Enter Payment Information

Provide credit card details through our secure payment processor (Stripe/Razorpay).

Complete Purchase

Review and confirm your purchase. Credits are added to your account immediately upon successful payment.

6.4 Credit Expiration

Credits do not expire
Credits are non-refundable
Credits cannot be transferred between accounts
Unused credits remain available even if subscription is canceled

6.5 Subscription Plans

Alternatively, subscribe to a monthly plan for included credits:

Credit Package Options

Package Name	Credits	Price (USD)	Cost per Credit
Basic Pack	300 credits	$29	$0.097 per credit
Standard Pack	500 credits	$39	$0.078 per credit
Pro Pack	1000 credits	$99	$0.099 per credit
Premium Pack	2000 credits	$199	$0.100 per credit
Enterprise Pack	5000 credits	$499	$0.100 per credit

7. OAuth App Overview

7.1 Integration Purpose

The Clivo - Klaviyo integration enables seamless deployment of AI-generated and Figma-converted email templates directly into Klaviyo accounts. This integration eliminates the need for manual HTML copying and pasting, streamlining the workflow for marketing teams using both platforms.

7.2 OAuth Implementation

Clivo implements OAuth 2.0 with PKCE (Proof Key for Code Exchange) for secure authentication with Klaviyo. This ensures that:

User credentials are never stored on Clivo servers
Authorization tokens are securely exchanged
Users maintain full control over granted permissions
Connections can be revoked at any time

7.3 Granted Permissions

When users authorize the integration, Clivo requests the following OAuth scopes:

Scope	Purpose
accounts:read	Identify and display connected Klaviyo account information
profiles:read	Access user profile data for personalization features (future use)
campaigns:read	List existing campaigns for reference
campaigns:write	Create and update email campaigns
templates:read	List existing templates to avoid duplicates
templates:write	Create new email templates in Klaviyo
lists:read	Display available lists and segments for targeting (future use)

7.4 Data Security

All data transmission occurs over HTTPS
Access tokens are encrypted at rest
Tokens are automatically refreshed before expiration
No sensitive data is logged or stored unnecessarily
Regular security audits are conducted

8. Customer Workflow

8.1 Complete Integration Setup

The following steps outline the complete customer journey from account creation to successful email deployment:

Create Clivo Account

Customer registers at https://app.clivo.email/register and completes email verification.

Result: Active Clivo account with 100 free credits

Connect Klaviyo Account

Customer navigates to Settings → Integrations and clicks "Connect Klaviyo Account"

Enters descriptive account name
Redirected to Klaviyo for authorization
Reviews and approves requested permissions
Redirected back to Clivo with success confirmation

Result: Klaviyo account successfully connected and ready for deployment

Create Email Campaign

Customer creates an email using Figma Converter:

Import Figma design
Convert to HTML email
Preview and edit as needed

Result: Professional email template ready for deployment

Deploy to Klaviyo

Customer deploys the email template:

Clicks "Deploy to Platform" button
Selects Klaviyo as target platform
Chooses connected Klaviyo account
Configures template name, sender info, and subject line
Confirms deployment

Result: Email template appears in Klaviyo account, ready to be used in campaigns or flows

8.2 Ongoing Usage

After initial setup, customers can:

Create unlimited emails (subject to credit availability)
Deploy to Klaviyo without additional authentication
Connect multiple Klaviyo accounts
View deployment history and analytics
Manage connected accounts in Settings

9. Integration Details

9.1 Use Cases and API Endpoints

The following table outlines each integration use case and the corresponding Klaviyo API endpoints utilized:

Use Case	Klaviyo API Endpoint(s)
1. OAuth Authorization Authenticate user and obtain access tokens	POST https://a.klaviyo.com/oauth/token GET https://www.klaviyo.com/oauth/authorize
2. Account Verification Retrieve connected Klaviyo account information	GET https://a.klaviyo.com/api/accounts/
3. Template Creation Deploy email HTML as a template in Klaviyo	POST https://a.klaviyo.com/api/templates/
4. Template Listing Retrieve existing templates to avoid duplicates	GET https://a.klaviyo.com/api/templates/
5. Token Refresh Refresh expired access tokens automatically	POST https://a.klaviyo.com/oauth/token (with grant_type=refresh_token)
6. List Retrieval (Future) Display available lists for targeting	GET https://a.klaviyo.com/api/lists/
7. Campaign Creation (Future) Create campaigns directly from Clivo	POST https://a.klaviyo.com/api/campaigns/

9.2 API Call Details

Template Creation Payload

                POST /api/templates/
                Content-Type: application/json
                Authorization: Bearer {access_token}

                {
                "data": {
                "type": "template",
                "attributes": {
                "name": "Email Template Name",
                "html": "<html>...</html>",
                "text": "Plain text version",
                "editor_type": "CODE"
                }
                }
                }
            

Response Handling

                Success Response (201 Created):
                {
                "data": {
                "type": "template",
                "id": "template_123abc",
                "attributes": {
                "name": "Email Template Name",
                "created": "2025-11-17T10:30:00Z",
                "updated": "2025-11-17T10:30:00Z"
                }
                }
                }
            

10. Architectural Diagram

10.1 Data Flow Overview

The following diagram illustrates how data moves between Clivo, Klaviyo, and the end user:

┌─────────────────┐         ┌──────────────────┐         ┌─────────────────┐
│                 │         │                  │         │                 │
│  Clivo    │         │   Klaviyo API    │         │   End User      │
│  Frontend       │         │                  │         │   (Browser)     │
│                 │         │                  │         │                 │
└────────┬────────┘         └────────┬─────────┘         └────────┬────────┘
         │                           │                            │
         │  1. User clicks           │                            │
         │  "Connect Klaviyo"        │                            │
         │───────────────────────────┼────────────────────────────▶
         │                           │                            │
         │  2. Request OAuth URL     │                            │
         │──────────────────────────▶│                            │
         │                           │                            │
         │  3. Return Auth URL       │                            │
         │◀──────────────────────────│                            │
         │                           │                            │
         │  4. Redirect to Klaviyo   │                            │
         │───────────────────────────┼────────────────────────────▶
         │                           │                            │
         │                           │  5. User authorizes         │
         │                           │◀────────────────────────────│
         │                           │                            │
         │                           │  6. Auth code returned      │
         │◀──────────────────────────┼────────────────────────────│
         │                           │                            │
         │  7. Exchange code         │                            │
         │     for tokens            │                            │
         │──────────────────────────▶│                            │
         │                           │                            │
         │  8. Return access         │                            │
         │     & refresh tokens      │                            │
         │◀──────────────────────────│                            │
         │                           │                            │
         │  9. Store tokens          │                            │
         │     (encrypted)           │                            │
         │                           │                            │
         │ 10. User creates email    │                            │
         │◀──────────────────────────┼────────────────────────────│
         │                           │                            │
         │ 11. Deploy to Klaviyo     │                            │
         │──────────────────────────▶│                            │
         │                           │                            │
         │                           │ 12. Create template         │
         │                           │     in Klaviyo             │
         │                           │                            │
         │ 13. Success confirmation  │                            │
         │◀──────────────────────────│                            │
         │                           │                            │
         │ 14. Show success message  │                            │
         │───────────────────────────┼────────────────────────────▶
         │                           │                            │
         ▼                           ▼                            ▼

10.2 System Components

Frontend Application (React)

User interface for email creation and editing
OAuth flow initiation
Deployment configuration
Real-time preview and testing

Backend API (Node.js/Express)

OAuth token management
Klaviyo API integration
Template storage and retrieval
User authentication (JWT)
Credit management

Database (MongoDB)

User accounts and profiles
Encrypted OAuth tokens
Email templates and history
Deployment logs
Credit transactions

External Services

Klaviyo API (OAuth and REST API)
Figma API (for design imports)
Payment processor (Stripe/Razorpay)
Email delivery service

11. Testing Details

12.1 Test Account Access

Klaviyo Test Account

For security purposes, account credentials are not included in this document.

Klaviyo team can request a password reset to gain access to the test account.

11.2 Test Environment Details

Property	Value
Application URL	https://app.clivo.email
API Base URL	https://api.clivo.email
OAuth Install URL	https://app.clivo.email/settings
OAuth Redirect URI	https://api.clivo.email/klaviyo/oauthcallback
Test Credits Available	1000 credits (for testing)

11.3 Testing Instructions

Log in to Clivo test account
Navigate to Settings → Integrations
Connect a Klaviyo test account
Create sample emails using both AI and Figma converter
Deploy emails to Klaviyo
Verify templates appear in Klaviyo account
Test revocation flow (disconnect account)

11.4 Sample Test Data

The test account includes pre-created sample data:

3 Figma-converted email templates
Pre-configured brand kit
Sample deployment history

11.5 Known Test Limitations

Test account uses sandbox Klaviyo account
Email sending is disabled (templates only)
Some advanced features may be limited in test mode

12. Technical Review Checklist

12.1 Integrating with Klaviyo

Install URL

Install URL directs user as expected: OAuth Install URL (https://app.clivo.email/settings) redirects directly into authorization workflow
Works while logged into Partner App: Users already logged into Clivo are seamlessly directed to Klaviyo authorization
Works while not logged into Partner App: Non-logged-in users are redirected through Clivo login before proceeding to Klaviyo authorization
Installation via Partner App is seamless: Clear "Connect Klaviyo Account" button in Settings → Integrations with intuitive flow

Uninstalling

Revoking access via Partner App: "Disconnect" button in Clivo Settings successfully revokes OAuth tokens and removes integration visibility
Removing integration via Klaviyo: Webhook handler implemented to receive uninstall notifications from Klaviyo and update Clivo database accordingly

Settings & Configuration

Settings URL directs to Integration Settings: Settings URL (https://app.clivo.email/settings) provides dedicated Klaviyo integration management interface
Deny permission workflow: Clear messaging displayed when user denies permissions: "Authorization was denied. To use Klaviyo integration, please reconnect and grant required permissions."

Metrics & Performance

Metrics supplied and updated: Branded events track template deployments, usage statistics, and integration health
App performs as expected: All documented use cases (OAuth, template creation, deployment) function correctly

12.2 OAuth Flow Details

Authorization URL Structure

                https://www.klaviyo.com/oauth/authorize?
                response_type=code
                &client_id={client_code}
                &redirect_uri=https://api.clivo.email/klaviyo/oauthcallback
                &scope=accounts:read+profiles:read+campaigns:read+campaigns:write+templates:read+templates:write+lists:read
                &state={base64_encoded_user_data}
                &code_challenge={pkce_challenge}
                &code_challenge_method=S256
            

Token Exchange Implementation

                POST https://a.klaviyo.com/oauth/token
                Content-Type: application/x-www-form-urlencoded
                Authorization: Basic {base64(client_id:client_secret)}

                grant_type=authorization_code
                &code={authorization_code}
                &redirect_uri=https://api.clivo.email/klaviyo/oauthcallback
                &code_verifier={pkce_verifier}
            

Token Storage

Access tokens encrypted using AES-256
Refresh tokens stored separately with additional encryption layer
Token expiry tracked and automatic refresh implemented
All tokens associated with user ID for isolation

13. General Documentation

13.1 Documentation Provided

Installation Instructions

Comprehensive user guide (Section 4: Connecting Klaviyo Account)
Step-by-step screenshots and videos
Troubleshooting section for common issues

Support Resources

Resource Type	URL/Location
Settings URL	https://app.clivo.email/settings
Support Email	support@clivo.email

Integration Registration

OAuth app registered in Klaviyo Developer Portal
App name: "Clivo"
App description: "AI-powered email design and deployment platform"
Privacy policy: https://clivo.email/privacy.html
Terms of service: https://clivo.email/terms.html

Security Questionnaire

Completed Klaviyo Security Questionnaire submitted separately
SOC 2 Type II compliance in progress
GDPR and CCPA compliance measures documented
Data retention policies defined

13.2 Klaviyo Brand Guidelines Compliance

Official Klaviyo logo used in integration settings
Correct brand name spelling: "Klaviyo" (not "Klayvio" or variations)
Brand colors matched to Klaviyo guidelines
Proper attribution in all marketing materials
"Powered by Klaviyo" badge displayed where applicable

14. Contact Information

14.1 Clivo Team

Company Name	Clivo
Website	https://clivo.email
Application URL	https://app.clivo.email
API Base URL	https://api.clivo.email
Support Email	support@clivo.email
Technical Contact	system@clivo.email

14.2 Document Information

Document Version	1.0
Last Updated	November 17, 2025
Prepared For	Klaviyo Ecosystem Team
Document Type	OAuth Integration Documentation & User Guide

Confidentiality Notice

This document contains confidential information intended solely for the Klaviyo Ecosystem team for the purpose of OAuth app review. Distribution or reproduction without written consent from Clivo is prohibited.

End of Document

Clivo - Klaviyo Integration Documentation

Help Center

Help topics

Clivo - Klaviyo Integration

1. Overview

1.1 About Clivo

1.2 Key Features

1.3 Platform Requirements

2. Sign Up & Account Setup

2.1 Creating an Account

Visit Registration Page

Enter Your Information

Accept Terms and Conditions

Verify Email Address

Complete Profile Setup

2.2 Setting Up Brand Kit

3. Using Figma to Email Converter

3.1 Overview

3.2 Preparing Your Figma Design

Design Requirements:

3.3 Conversion Process

Access Figma Converter

Connect Figma Account

Select Figma File

Choose Frame/Artboard

Configure Conversion Settings

Start Conversion

Review and Edit

Save Email

3.4 Best Practices

4. Connecting Klaviyo Account

4.1 Prerequisites

4.2 Connection Process

Navigate to Settings

Locate Klaviyo Integration

Click "Connect Klaviyo Account"

Enter Account Name

Authorize in Klaviyo

Confirmation

4.3 Managing Connected Accounts

5. Exporting Emails to Klaviyo

5.1 Export Process

Select Email

Click "Deploy to Platform"

Select Klaviyo

Choose Account

Configure Deployment Settings

Deploy

Confirmation

5.2 Using Deployed Templates in Klaviyo

6. Credit System & Purchase

6.1 How Credits Work

6.2 Checking Credit Balance

6.3 Purchasing Credits

Navigate to Credit Purchase

Select Credit Package

Enter Payment Information

Complete Purchase

6.4 Credit Expiration

6.5 Subscription Plans

Credit Package Options

7. OAuth App Overview

7.1 Integration Purpose

7.2 OAuth Implementation

7.3 Granted Permissions

7.4 Data Security

8. Customer Workflow

8.1 Complete Integration Setup

Create Clivo Account

Connect Klaviyo Account

Create Email Campaign

Deploy to Klaviyo

8.2 Ongoing Usage

9. Integration Details

9.1 Use Cases and API Endpoints

9.2 API Call Details

Template Creation Payload

Response Handling

10. Architectural Diagram

10.1 Data Flow Overview

10.2 System Components