Documentacion

Instala SeoBlogs en cualquier web.

El blog se entrega como Web Component con Shadow DOM. Puedes montarlo en HTML puro, WordPress, React, Vue, Angular o cualquier CMS que permita insertar scripts.

Quickstart HTML

Pega el script del CDN y el elemento del widget donde quieras que aparezca el blog.

<script>
window.BlogReaderConfig = {
  apiKey: 'PUBLIC_READONLY_KEY',
  routeBase: '/blog',
  routing: 'history',
  pageSize: 12,
  theme: 'auto',
  backgroundColor: '#f7f9fc',
  primaryColor: '#c8a85a',
  secondaryColor: '#64748b',
  heroEyebrow: 'BLOG',
  heroTitle: 'Articles',
  heroSubtitle: 'Fresh stories from our team',
  lang: 'en',
  showSearch: true,
  showTags: true
};
</script>
<script src="https://cdn.seoblogs.es/blog-reader-widget.iife.js"></script>
<blog-reader-widget
  api-key="PUBLIC_READONLY_KEY"
  base-path="/blog"
  page-size="12"
></blog-reader-widget>

WordPress

Usa un bloque HTML personalizado. Si el hosting no soporta rewrites para /blog/post/slug, cambia routing a hash.

<script>
window.BlogReaderConfig = {
  apiKey: 'PUBLIC_READONLY_KEY',
  routeBase: '/blog',
  routing: 'hash',
  theme: 'light',
  backgroundColor: '#ffffff'
};
</script>
<script src="https://cdn.seoblogs.es/blog-reader-widget.iife.js"></script>
<blog-reader-widget page-size="9"></blog-reader-widget>

React, Vue y Angular

El elemento custom se puede renderizar directamente. Carga el bundle una vez y pasa los atributos al componente.

import { useEffect } from 'react';

export function BlogReader() {
  useEffect(() => {
    import('https://cdn.seoblogs.es/blog-reader-widget.es.js');
  }, []);

  return (
    <blog-reader-widget
      api-key="PUBLIC_READONLY_KEY"
      base-path="/blog"
      page-size="12"
      theme="light"
    />
  );
}

Contrato API

El widget consulta posts publicados y detalle por slug usando una clave publica de solo lectura.

GET /api/posts?page=1&limit=12&status=PUBLISHED&search=query&tag=seo
Headers:
  x-api-key: PUBLIC_READONLY_KEY
  Accept: application/json

GET /api/posts/{slug}
Headers:
  x-api-key: PUBLIC_READONLY_KEY
  Accept: application/json

Playground del widget

Cambia las propiedades, prueba el resultado y copia solo la configuracion visual para pegarla en tu web.