Documentation - Velos Integration Guide

Quick Start

Getting started with Velos takes less than 5 minutes. Simply add our script tag to your website and watch as every page automatically gets optimized OG tags.

1. Get Your API Key

First, sign up for a Velos account and get your API key from the dashboard. This key identifies your website and tracks your usage.

2. Add the Script Tag

Add this script tag to your HTML head section:

<script src="https://cdn.velos.ai/sdk.js" 
        data-api-key="your-api-key-here"
        data-project-id="your-project-id"></script>

3. That's It!

Velos will automatically start analyzing your pages and generating optimized OG tags. No additional configuration needed.

Configuration Options

Customize Velos behavior with these data attributes:

data-api-key: Your unique API key (required)
data-project-id: Project identifier for organization
data-auto-detect: Enable/disable automatic detection (default: true)
data-debug: Enable debug logging (default: false)

Manual Control

For advanced users, Velos provides a JavaScript API for manual control:

// Manual OG generation
window.Velos.generateOG('Custom Title', 'Custom description...');

// Process current page manually
window.Velos.processPage();

// Update configuration
window.Velos.setConfig({ debug: true });

Framework Integration

Next.js

Add the script to your layout.tsx or _app.js file:

import Script from 'next/script'

export default function Layout({ children }) {
  return (
    <>
      {children}
      <Script 
        src="https://cdn.velos.ai/sdk.js"
        data-api-key="your-api-key"
        strategy="afterInteractive"
      />
    </>
  )
}

React

Use React Helmet or add to your index.html:

import { Helmet } from 'react-helmet'

function App() {
  return (
    <>
      <Helmet>
        <script 
          src="https://cdn.velos.ai/sdk.js"
          data-api-key="your-api-key"
        />
      </Helmet>
      {/* Your app content */}
    </>
  )
}

Troubleshooting

OG Tags Not Appearing

Check that your API key is correct
Ensure the script loads without errors
Enable debug mode to see console logs
Wait a few seconds after page load

Performance Concerns

Velos only processes each URL once
API calls are cached and debounced
The script is lightweight (< 10KB)
Processing happens asynchronously

Best Practices

Test on a staging environment first
Monitor your usage in the dashboard
Use project IDs to organize different sites
Enable debug mode during development
Review generated content regularly

Support

Need help? Our support team is here to assist you. Contact us through the dashboard or email support@velos.ai for technical questions.