Content Autopilot Integration Guide
Display AI-generated articles on your website to boost SEO and engage visitors. This guide covers integration for all platforms including Shopify, WordPress, React, and vanilla JavaScript.
Overview
Content Autopilot generates SEO-optimized articles that you can display on your website's blog. The articles:
- Are fully styled with embedded CSS (no additional styling needed)
- Include proper headings, paragraphs, lists, and callout boxes
- Work on any website platform
- Appear on YOUR domain (great for SEO)
Prerequisites
Before integrating, ensure you have:
- Reevix SDK installed on your website (SDK Installation Guide)
- Content Autopilot enabled in your Reevix dashboard
- At least one published article (approve articles in Setup → Content Autopilot)
Quick Start (All Platforms)
Step 1: Verify SDK is Installed
The Reevix SDK should already be on your website. Verify by opening your browser console and typing:
rvx
If you see a function, the SDK is installed. If not, install the SDK first.
Step 2: Fetch Articles List
Add this code to your blog listing page:
rvx('articles', function(articles) {
console.log('Articles:', articles);
// articles is an array of:
// {
// slug: "article-url-slug",
// title: "Article Title",
// path: "/blog/article-url-slug"
// }
});
Step 3: Fetch Single Article
When displaying a full article, fetch it by slug:
var slug = 'your-article-slug'; // Get from URL
rvx('article', slug, function(article) {
if (article) {
console.log('Title:', article.title);
console.log('Content:', article.content_styled_html);
}
});
Article Data Structure
When you fetch a single article, you receive:
| Field | Description |
|---|---|
title | Article headline |
description | Short summary/excerpt |
content_styled_html | Full HTML with embedded CSS - use this for display |
content_html | Raw HTML without styling |
category | Article category |
tags | Array of tags |
read_time_minutes | Estimated reading time |
seo_title | SEO-optimized title for <title> tag |
seo_description | Meta description for SEO |
published_at | Publication date |
Important: Always use content_styled_html for displaying articles. It includes all necessary CSS for proper formatting.
Shopify Integration
Shopify stores can display Content Autopilot articles using the Reevix Shopify app.
Automatic Setup (Recommended)
If you installed Reevix from the Shopify App Store, articles are automatically available at:
https://your-store.myshopify.com/apps/reevix/blog
https://your-store.myshopify.com/apps/reevix/blog/article-slug
No code changes needed!
Custom Theme Integration
If you want articles on a custom page in your theme:
1. Create a new page template
In your Shopify theme, create templates/page.reevix-blog.liquid:
{% comment %}
Reevix AI Articles Blog Page
{% endcomment %}
<div class="page-width">
<h1>{{ page.title }}</h1>
<!-- Article listing container -->
<div id="reevix-articles" class="blog-articles">
<p>Loading articles...</p>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Wait for Reevix SDK
function loadArticles() {
if (typeof rvx === 'function') {
rvx('articles', function(articles) {
var container = document.getElementById('reevix-articles');
if (!articles || articles.length === 0) {
container.innerHTML = '<p>No articles yet. Check back soon!</p>';
return;
}
var html = '<div class="article-grid">';
articles.forEach(function(article) {
html += '<article class="article-card">';
html += '<a href="/pages/article?slug=' + article.slug + '">';
html += '<h2>' + article.title + '</h2>';
html += '</a>';
html += '</article>';
});
html += '</div>';
container.innerHTML = html;
});
} else {
setTimeout(loadArticles, 500);
}
}
loadArticles();
});
</script>
<style>
.article-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 2rem;
margin-top: 2rem;
}
.article-card {
border: 1px solid #e5e5e5;
border-radius: 8px;
padding: 1.5rem;
transition: box-shadow 0.2s;
}
.article-card:hover {
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.article-card h2 {
font-size: 1.25rem;
margin: 0;
}
.article-card a {
text-decoration: none;
color: inherit;
}
</style>
2. Create an article page template
Create templates/page.reevix-article.liquid:
{% comment %}
Reevix AI Single Article Page
{% endcomment %}
<div class="page-width">
<a href="/pages/blog" class="back-link">← Back to Blog</a>
<article id="reevix-article">
<p>Loading article...</p>
</article>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Get slug from URL parameter
var urlParams = new URLSearchParams(window.location.search);
var slug = urlParams.get('slug');
if (!slug) {
document.getElementById('reevix-article').innerHTML = '<p>Article not found.</p>';
return;
}
function loadArticle() {
if (typeof rvx === 'function') {
rvx('article', slug, function(article) {
var container = document.getElementById('reevix-article');
if (!article) {
container.innerHTML = '<p>Article not found.</p>';
return;
}
// Update page title
document.title = article.seo_title || article.title;
// Update meta description
var metaDesc = document.querySelector('meta[name="description"]');
if (metaDesc) {
metaDesc.setAttribute('content', article.seo_description || article.description);
}
var html = '';
html += '<header class="article-header">';
html += '<span class="article-category">' + (article.category || 'Article') + '</span>';
html += '<h1>' + article.title + '</h1>';
html += '<p class="article-description">' + article.description + '</p>';
html += '<div class="article-meta">';
if (article.published_at) {
var date = new Date(article.published_at);
html += '<span>' + date.toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' }) + '</span>';
}
html += '<span>' + article.read_time_minutes + ' min read</span>';
html += '</div>';
html += '</header>';
// Use content_styled_html for properly formatted content
html += '<div class="article-content">' + article.content_styled_html + '</div>';
// Tags
if (article.tags && article.tags.length > 0) {
html += '<div class="article-tags">';
article.tags.forEach(function(tag) {
html += '<span class="tag">' + tag + '</span>';
});
html += '</div>';
}
container.innerHTML = html;
});
} else {
setTimeout(loadArticle, 500);
}
}
loadArticle();
});
</script>
<style>
.back-link {
display: inline-block;
margin-bottom: 2rem;
color: #666;
text-decoration: none;
}
.back-link:hover {
color: #000;
}
.article-header {
margin-bottom: 2rem;
padding-bottom: 2rem;
border-bottom: 1px solid #e5e5e5;
}
.article-category {
display: inline-block;
padding: 0.25rem 0.75rem;
background: #f0f0f0;
border-radius: 4px;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 1rem;
}
.article-header h1 {
font-size: 2.5rem;
line-height: 1.2;
margin: 0 0 1rem 0;
}
.article-description {
font-size: 1.25rem;
color: #666;
line-height: 1.6;
}
.article-meta {
display: flex;
gap: 1.5rem;
color: #888;
font-size: 0.875rem;
}
.article-tags {
margin-top: 3rem;
padding-top: 2rem;
border-top: 1px solid #e5e5e5;
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.tag {
padding: 0.25rem 0.75rem;
background: #f5f5f5;
border-radius: 4px;
font-size: 0.875rem;
color: #666;
}
</style>
3. Create pages in Shopify Admin
- Go to Online Store → Pages
- Create a page titled "Blog" and assign template
page.reevix-blog - Create a page titled "Article" and assign template
page.reevix-article
WordPress Integration
Using a Custom Page Template
1. Create the blog listing template
Create page-reevix-blog.php in your theme folder:
<?php
/**
* Template Name: Reevix Blog
*/
get_header();
?>
<main class="site-main">
<div class="container">
<h1>Blog</h1>
<div id="reevix-articles">
<p>Loading articles...</p>
</div>
</div>
</main>
<script>
document.addEventListener('DOMContentLoaded', function() {
function loadArticles() {
if (typeof rvx === 'function') {
rvx('articles', function(articles) {
var container = document.getElementById('reevix-articles');
if (!articles || articles.length === 0) {
container.innerHTML = '<p>No articles available.</p>';
return;
}
var html = '<div class="articles-grid">';
articles.forEach(function(article) {
html += '<article class="article-card">';
html += '<a href="<?php echo home_url('/reevix-article/'); ?>?slug=' + article.slug + '">';
html += '<h2>' + article.title + '</h2>';
html += '</a>';
html += '</article>';
});
html += '</div>';
container.innerHTML = html;
});
} else {
setTimeout(loadArticles, 500);
}
}
loadArticles();
});
</script>
<style>
.articles-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 2rem;
margin-top: 2rem;
}
.article-card {
border: 1px solid #ddd;
border-radius: 8px;
padding: 1.5rem;
}
.article-card h2 {
font-size: 1.25rem;
margin: 0;
}
.article-card a {
text-decoration: none;
color: inherit;
}
</style>
<?php get_footer(); ?>
2. Create the single article template
Create page-reevix-article.php in your theme folder:
<?php
/**
* Template Name: Reevix Article
*/
get_header();
?>
<main class="site-main">
<div class="container">
<a href="<?php echo home_url('/reevix-blog/'); ?>" class="back-link">← Back to Blog</a>
<article id="reevix-article">
<p>Loading article...</p>
</article>
</div>
</main>
<script>
document.addEventListener('DOMContentLoaded', function() {
var urlParams = new URLSearchParams(window.location.search);
var slug = urlParams.get('slug');
if (!slug) {
document.getElementById('reevix-article').innerHTML = '<p>Article not found.</p>';
return;
}
function loadArticle() {
if (typeof rvx === 'function') {
rvx('article', slug, function(article) {
var container = document.getElementById('reevix-article');
if (!article) {
container.innerHTML = '<p>Article not found.</p>';
return;
}
document.title = article.seo_title || article.title;
var html = '<header>';
html += '<span class="category">' + (article.category || 'Article') + '</span>';
html += '<h1>' + article.title + '</h1>';
html += '<p class="description">' + article.description + '</p>';
html += '<div class="meta">';
if (article.published_at) {
var date = new Date(article.published_at);
html += '<span>' + date.toLocaleDateString() + '</span>';
}
html += '<span>' + article.read_time_minutes + ' min read</span>';
html += '</div>';
html += '</header>';
// Use content_styled_html - includes all CSS
html += article.content_styled_html;
container.innerHTML = html;
});
} else {
setTimeout(loadArticle, 500);
}
}
loadArticle();
});
</script>
<?php get_footer(); ?>
3. Create pages in WordPress Admin
- Go to Pages → Add New
- Create "Reevix Blog" page, select template "Reevix Blog"
- Create "Reevix Article" page, select template "Reevix Article"
React / Next.js Integration
Blog Listing Component
// components/ContentArticles.jsx
import { useEffect, useState } from 'react';
import Link from 'next/link';
export function ContentArticles() {
const [articles, setArticles] = useState([]);
const [loading, setLoading] = useState(true);
useEffect(() => {
const fetchArticles = () => {
if (typeof window !== 'undefined' && window.rvx) {
window.rvx('articles', (data) => {
setArticles(data || []);
setLoading(false);
});
} else {
// SDK not loaded yet, retry
setTimeout(fetchArticles, 500);
}
};
// Give SDK time to initialize
setTimeout(fetchArticles, 1000);
}, []);
if (loading) {
return <div>Loading articles...</div>;
}
if (articles.length === 0) {
return null; // No articles to show
}
return (
<div className="articles-grid">
{articles.map((article) => (
<Link key={article.slug} href={`/blog/${article.slug}`}>
<article className="article-card">
<h2>{article.title}</h2>
</article>
</Link>
))}
</div>
);
}
Single Article Page
// app/blog/[slug]/page.jsx (Next.js App Router)
'use client';
import { useEffect, useState } from 'react';
import { useParams } from 'next/navigation';
import Link from 'next/link';
export default function ArticlePage() {
const params = useParams();
const slug = params.slug;
const [article, setArticle] = useState(null);
const [loading, setLoading] = useState(true);
useEffect(() => {
const fetchArticle = () => {
if (typeof window !== 'undefined' && window.rvx) {
window.rvx('article', slug, (data) => {
if (data) {
setArticle(data);
// Update page title for SEO
document.title = data.seo_title || data.title;
}
setLoading(false);
});
} else {
setTimeout(fetchArticle, 500);
}
};
setTimeout(fetchArticle, 1000);
}, [slug]);
if (loading) {
return <div>Loading...</div>;
}
if (!article) {
return (
<div>
<h1>Article Not Found</h1>
<Link href="/blog">← Back to Blog</Link>
</div>
);
}
return (
<main>
<Link href="/blog">← Back to Blog</Link>
<header>
<span className="category">{article.category}</span>
<h1>{article.title}</h1>
<p className="description">{article.description}</p>
<div className="meta">
{article.published_at && (
<span>
{new Date(article.published_at).toLocaleDateString('en-US', {
year: 'numeric',
month: 'long',
day: 'numeric',
})}
</span>
)}
<span>{article.read_time_minutes} min read</span>
</div>
</header>
{/* Use content_styled_html - includes all necessary CSS */}
<div
dangerouslySetInnerHTML={{ __html: article.content_styled_html }}
/>
{/* Tags */}
{article.tags && article.tags.length > 0 && (
<div className="tags">
{article.tags.map((tag) => (
<span key={tag} className="tag">{tag}</span>
))}
</div>
)}
</main>
);
}
Vanilla JavaScript Integration
For any website without a framework:
Blog Listing Page
<!DOCTYPE html>
<html>
<head>
<title>Blog</title>
<style>
.articles-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 2rem;
max-width: 1200px;
margin: 0 auto;
padding: 2rem;
}
.article-card {
border: 1px solid #e5e5e5;
border-radius: 8px;
padding: 1.5rem;
transition: box-shadow 0.2s;
}
.article-card:hover {
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.article-card h2 {
font-size: 1.25rem;
margin: 0;
}
.article-card a {
text-decoration: none;
color: inherit;
}
</style>
</head>
<body>
<h1>Blog</h1>
<div id="articles-container">
<p>Loading articles...</p>
</div>
<!-- Reevix SDK should already be on your site -->
<script>
document.addEventListener('DOMContentLoaded', function() {
function loadArticles() {
if (typeof rvx === 'function') {
rvx('articles', function(articles) {
var container = document.getElementById('articles-container');
if (!articles || articles.length === 0) {
container.innerHTML = '<p>No articles available yet.</p>';
return;
}
var html = '<div class="articles-grid">';
articles.forEach(function(article) {
html += '<article class="article-card">';
html += '<a href="/article.html?slug=' + article.slug + '">';
html += '<h2>' + article.title + '</h2>';
html += '</a>';
html += '</article>';
});
html += '</div>';
container.innerHTML = html;
});
} else {
// SDK not ready, retry
setTimeout(loadArticles, 500);
}
}
loadArticles();
});
</script>
</body>
</html>
Single Article Page
<!DOCTYPE html>
<html>
<head>
<title>Article</title>
<meta name="description" content="">
<style>
.article-container {
max-width: 800px;
margin: 0 auto;
padding: 2rem;
}
.back-link {
display: inline-block;
margin-bottom: 2rem;
color: #666;
text-decoration: none;
}
.back-link:hover {
color: #000;
}
.article-header {
margin-bottom: 2rem;
padding-bottom: 2rem;
border-bottom: 1px solid #e5e5e5;
}
.article-category {
display: inline-block;
padding: 0.25rem 0.75rem;
background: #f0f0f0;
border-radius: 4px;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 1rem;
}
.article-header h1 {
font-size: 2.5rem;
line-height: 1.2;
margin: 0 0 1rem 0;
}
.article-description {
font-size: 1.25rem;
color: #666;
line-height: 1.6;
}
.article-meta {
display: flex;
gap: 1.5rem;
color: #888;
font-size: 0.875rem;
margin-top: 1rem;
}
.article-tags {
margin-top: 3rem;
padding-top: 2rem;
border-top: 1px solid #e5e5e5;
}
.tag {
display: inline-block;
padding: 0.25rem 0.75rem;
background: #f5f5f5;
border-radius: 4px;
font-size: 0.875rem;
color: #666;
margin-right: 0.5rem;
margin-bottom: 0.5rem;
}
</style>
</head>
<body>
<div class="article-container">
<a href="/blog.html" class="back-link">← Back to Blog</a>
<article id="article-content">
<p>Loading article...</p>
</article>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Get slug from URL
var urlParams = new URLSearchParams(window.location.search);
var slug = urlParams.get('slug');
if (!slug) {
document.getElementById('article-content').innerHTML = '<p>Article not found.</p>';
return;
}
function loadArticle() {
if (typeof rvx === 'function') {
rvx('article', slug, function(article) {
var container = document.getElementById('article-content');
if (!article) {
container.innerHTML = '<p>Article not found.</p>';
return;
}
// Update page title and meta description for SEO
document.title = article.seo_title || article.title;
var metaDesc = document.querySelector('meta[name="description"]');
if (metaDesc) {
metaDesc.setAttribute('content', article.seo_description || article.description);
}
var html = '';
// Header
html += '<header class="article-header">';
html += '<span class="article-category">' + (article.category || 'Article') + '</span>';
html += '<h1>' + article.title + '</h1>';
html += '<p class="article-description">' + article.description + '</p>';
html += '<div class="article-meta">';
if (article.published_at) {
var date = new Date(article.published_at);
var options = { year: 'numeric', month: 'long', day: 'numeric' };
html += '<span>' + date.toLocaleDateString('en-US', options) + '</span>';
}
html += '<span>' + article.read_time_minutes + ' min read</span>';
html += '</div>';
html += '</header>';
// Content - USE content_styled_html for proper formatting!
html += article.content_styled_html;
// Tags
if (article.tags && article.tags.length > 0) {
html += '<div class="article-tags">';
article.tags.forEach(function(tag) {
html += '<span class="tag">' + tag + '</span>';
});
html += '</div>';
}
container.innerHTML = html;
});
} else {
setTimeout(loadArticle, 500);
}
}
loadArticle();
});
</script>
</body>
</html>
SEO Best Practices
Adding Content Articles to Your Sitemap
For best SEO results, add your Content Autopilot articles to your website's main sitemap. This ensures Google discovers new articles automatically.
Option 1: Dynamic Sitemap (Recommended)
Fetch article routes from the Reevix API and include them in your sitemap generation:
API Endpoint:
GET https://edge.reevix.ai/v1/stores/YOUR_STORE_PUBLIC_ID/content/routes
Response:
{
"routes": [
{
"slug": "reduce-subscription-churn",
"title": "How to Reduce Subscription Churn",
"path": "/insights/reduce-subscription-churn"
}
]
}
Next.js Example (app/sitemap.ts):
import type { MetadataRoute } from 'next'
const STORE_PUBLIC_ID = 'your_store_public_id' // From Reevix dashboard
async function fetchContentArticles() {
try {
const response = await fetch(
`https://edge.reevix.ai/v1/stores/${STORE_PUBLIC_ID}/content/routes`,
{ next: { revalidate: 3600 } } // Refresh every hour
)
if (!response.ok) return []
const data = await response.json()
return data.routes || []
} catch {
return []
}
}
export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
const contentArticles = await fetchContentArticles()
// Your existing sitemap entries
const staticPages = [
{ url: 'https://yoursite.com', lastModified: new Date() },
{ url: 'https://yoursite.com/about', lastModified: new Date() },
// ... other pages
]
// Add content articles
const contentPages = contentArticles.map((article: { slug: string }) => ({
url: `https://yoursite.com/blog/${article.slug}`,
lastModified: new Date(),
changeFrequency: 'weekly' as const,
priority: 0.7,
}))
return [...staticPages, ...contentPages]
}
WordPress Example (functions.php):
// Add Reevix articles to sitemap (works with Yoast SEO)
add_filter('wpseo_sitemap_index', 'add_reevix_articles_to_sitemap');
function add_reevix_articles_to_sitemap($sitemap_index) {
$store_id = 'your_store_public_id';
$response = wp_remote_get(
"https://edge.reevix.ai/v1/stores/{$store_id}/content/routes"
);
if (is_wp_error($response)) return $sitemap_index;
$data = json_decode(wp_remote_retrieve_body($response), true);
$routes = $data['routes'] ?? [];
foreach ($routes as $route) {
$sitemap_index .= '<sitemap>';
$sitemap_index .= '<loc>' . home_url('/blog/' . $route['slug']) . '</loc>';
$sitemap_index .= '<lastmod>' . date('c') . '</lastmod>';
$sitemap_index .= '</sitemap>';
}
return $sitemap_index;
}
PHP/Custom Example:
<?php
// sitemap.php - Generate dynamic sitemap
header('Content-Type: application/xml');
$store_id = 'your_store_public_id';
$base_url = 'https://yoursite.com';
// Fetch content articles
$response = file_get_contents(
"https://edge.reevix.ai/v1/stores/{$store_id}/content/routes"
);
$data = json_decode($response, true);
$articles = $data['routes'] ?? [];
echo '<?xml version="1.0" encoding="UTF-8"?>';
?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<!-- Your static pages -->
<url>
<loc><?= $base_url ?></loc>
<changefreq>weekly</changefreq>
<priority>1.0</priority>
</url>
<!-- Content Autopilot articles -->
<?php foreach ($articles as $article): ?>
<url>
<loc><?= $base_url ?>/blog/<?= htmlspecialchars($article['slug']) ?></loc>
<lastmod><?= date('Y-m-d') ?></lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
</url>
<?php endforeach; ?>
</urlset>
Option 2: Separate Content Sitemap
If you can't modify your main sitemap, create a separate sitemap for content articles:
https://edge.reevix.ai/v1/stores/YOUR_STORE_PUBLIC_ID/content/sitemap.xml?domain=https://yoursite.com&path=/blog
Parameters:
domain- Your website URL (required for proper URLs)path- The path prefix for articles (default:/blog)
Then add this sitemap to Google Search Console alongside your main sitemap.
Note: Google prefers sitemaps hosted on the same domain as the content. Option 1 (dynamic sitemap) is recommended for best SEO results.
Meta Tags
The article data includes SEO-optimized fields. Use them:
rvx('article', slug, function(article) {
// Update page title
document.title = article.seo_title;
// Update meta description
document.querySelector('meta[name="description"]').content = article.seo_description;
// Add Open Graph tags dynamically if needed
// article.title, article.description, etc.
});
Canonical URLs
Articles should have canonical URLs pointing to your domain:
<link rel="canonical" href="https://yourdomain.com/blog/article-slug">
Troubleshooting
Articles not loading
- Check SDK is installed: Open browser console, type
rvx- should show a function - Check for errors: Look for red errors in browser console
- Verify articles exist: Go to Reevix dashboard → Setup → Content Autopilot and ensure you have published articles
Content not styled properly
Make sure you're using content_styled_html (not content_html):
// ✅ Correct - includes CSS
article.content_styled_html
// ❌ Wrong - no styling
article.content_html
CORS errors
If you see CORS errors, ensure:
- Your domain is registered in Reevix dashboard
- You're using the SDK (not direct API calls)
SDK not defined
If rvx is not defined:
- Check the SDK script is in your page's
<head> - Wait for SDK to load before calling:
function waitForSDK(callback) {
if (typeof rvx === 'function') {
callback();
} else {
setTimeout(function() { waitForSDK(callback); }, 500);
}
}
waitForSDK(function() {
rvx('articles', function(articles) {
// Now it's safe to use
});
});
Need Help?
- Documentation: docs.reevix.ai
- Email: support@reevix.ai
- Dashboard: app.reevix.ai