flayyer.io

Og:Image as a Service

Crea plantillas con React.js y Vue.js. Sube tus increíbles diseños a nuestra nube y úsalas para renderizar miles de imágenes.

Comienza
import { FlayyerIO } from "@flayyer/flayyer";
const flayyer = new FlayyerIO({
tenant: "flayyer",
deck: "demo",
template: "main",
variables: { title: "Atrae más personas a tu sitio" },
});
<meta property="og:image" content={flayyer.href()} />
<meta name="twitter:image" content={flayyer.href()} />
Esta imagen fue creada usando Flayyer.ioCambia la <meta property="og:image" /> de tu sitio por un link de Flayyer. Revisa nuestras guías de integración.flayyer.com
https://flayyer.com/es/io/demo
import React from "react"
import { TemplateProps } from "@flayyer/flayyer-types";
import clsx from "clsx";
import "../styles/tailwind.css";
import logo from "../static/logo.svg";
// https://flayyer.io/v2/flayyer/demo/main.jpeg?title=Create+more+engagement
type Variables = { title: string, img?: string };
export default function MainTemplate({ agent, variables }: TemplateProps<Variables>) {
const { title, img = "https://images.unsplash.com/photo-1601933552240-d6b9e8e01cdc?w=1200" } = variables;
if (agent.name === FlayyerAgentName.WHATSAPP) {
return (
<Layer className="bg-gray-800 p-20">
<img src={logo} className="w-full h-full" />
</Layer>
);
}
return (
<div>
<Layer>
<img className="w-full h-full object-cover object-bottom" src={img} />
</Layer>
<Layer className="bg-gradient-to-r from-gray-900 opacity-70 mr-96" />
<Layer className="flex flex-col justify-center items-start px-12 py-12 w-1/2">
<img src={logo} className="w-24 h-24" />
<h1 className="text-8xl text-white tracking-tight font-semibold">
{title}
</h1>
</Layer>
</div>
);
}
function Layer({ className, ...props }: React.ComponentProps<"div">) {
return <div {...props} className={clsx("absolute inset-0", className)} />;
}

JavaScript

Usa nuestro formateador universal de URL @flayyer/flayyer-js para integrarnos a cualquier framework.

Express.js

Podemos ser integrados a cualquier framework Connect.js o Fastify. Cada view engine es compatible.

Gatsby

Gatsby.js

Amamos JAMStack, y por supuesto soportamos Gatsby. Echa un vistazo a nuestra guía.

next-black

Next.js

Flayyer fue tremendamente inspirado por este framework, nuestro sitio está desarrollado con Next.js

Python

Creamos un paquete pip flayyer para que no tengas que lidiar con la codificación URL. Independiente del framework.

Django

Hemos utilizado este framework por muchos años. Armamos especialmente una guía y un ejemplo para amantes de Django.

Ruby

Nuestra gema oficial flayyer ya está disponible y lista para ser instalada. Independiente del framework.

Ruby on Rails

Potencia tu app de Rails con Flayyer. Estamos desarrollando una gema para hacer esto más automático.

Official PHP Logo

PHP

Muchos nos pidieron un plugin para Wordpress, por eso creamos esta librería independiente de PHP con Composer: flayyer/flayyer

Wordpress

Para tu blog, e-commerce, portafolio, o cualquier tipo de sitio web que desees. Revisa flayyer/flayyer-wp

Developer Experience y sin configuraciones

We strongly believe in providing the best developer tools to help you maximize productivity.

Deploy automático con GitHub Actions

Automatiza tu flujo de trabajo con GitHub Actions en menos de 5 minutos

Configura ahora

Un servicio distribuido globalmente mediante edge technology

Te garantizamos la mejor experiencia de usuario ofreciendo respuestas rápidas gracias a nuestro sistema global de caché.

PlanetPlanet avatar 01Planet avatar 02

Plantillas creadas

642+

Imágenes generadas

473.367+

Datos descargados

36.2GB+

Disponibilidad

99.95%

Precios y planes

Todos los planes cuentan con créditos renovables, acceso a nuestro dashboard y la posibilidad de crear ilimitados proyectos.

Gratuito

Prueba Flayyer sin compromiso. No requiere tarjeta de crédito.

Gratis

Crear cuenta
  • 2.100 impresiones/mes

  • Proyectos ilimitados

  • 1 usuario

  • URLs con firma digital

Hobby

Para pequeños proyectos con pocas páginas

$8/mes

Obtenlo por $6.58 usando pago anual

Seleccionar plan
  • 35.000 impresiones/mes

  • Proyectos ilimitados

  • 1 usuario

  • URLs con firma digital

  • Analytics

Pro

Gran volumen para compañías con mucho contenido para compartir.

$55/mes

Obtenlo por $41.58 usando pago anual

Seleccionar plan
  • 420.000 impresiones/mes

  • Proyectos ilimitados

  • 5 usuarios

  • Todo del plan Hobby

  • Imágenes Full HD

Escala

Masiva cantidad de imágenes para sitios web populares y virales.

$233/mes

Obtenlo por $166.58 usando pago anual

Seleccionar plan
  • 2.240.000 imágenes/mes

  • Proyectos ilimitados

  • Usuarios ilimitados

  • Todo del plan Hobby

  • Imágenes Full HD

  • Soporte prioritario

Una impresión es una métrica para cuantificar las veces que se observan las imágenes. Algunas plataformas podrían guardar las imágenes por un tiempo en sus propios sistemas de caché, esos casos no se cobran.

Precios en dólares estadounidenses. Podrían ser convertidos automáticamente a tu moneda local al momento de pagar

Planes empresariales con soporte premium

Soluciones personalizadas, servers dedicados, instalación local, servicios de diseño y desarrollo.

Servicio prioritario

Si estás lidiando con alto tráfico o simplemente no quieres preocuparte de cuotas, este plan puede ser para ti. También incluímos servidores dedicados para mayor seguridad y menores tiempos de entrega.

Se puede incluir

  • Imágenes ilimitadas

  • Servers dedicados

  • Consultoría de diseño e ingeniería

  • Mayor velocidad, seguridad y privacidad

  • Configuración local

  • Canal de Slack compartido con los fundadores del proyecto.

Potencia tu marketing

Hablemos