Hey devs!DevelopersCrea templates con React.jsFlyyer.io API

Og:Image as a Service

Toma control sobre tus links

Flyyer es la primera plataforma para administrar, previsualizar y crear links. Además genera imágenes para redes sociales de forma automática.

<head>
<meta
property="og:image"
content={`https://cdn.flyyer.io/:website/_/_/:path*`}
/>
</head>
Demo of multiple images showing a Nintendo Switch generated from a webpage using Flyyer.io

https://cdn.flyyer.io/v2

Houm.com logo
Global-crowd.com logo
Spikeball.cl logo
QueAFP.cl logo

Para usuarios y developers

Panel centralizado para tus previews

Configura tus links simplemente arrastrando las direcciones o usando un formato de rutas similar a Express.js si eres más técnico.

Mejora tu presencia online

Flyyer provee toda la tecnología para asegurar la mejor imagen para cada una de tus páginas web.

Toma control de las previews de tus links

Lo primero que ven las personas es la imagen adjunta a los links, conocida como og:image. Flyyer permite que las compañías creen y administren esas imágenes.

Mantén tu URL propia

Respeta el dominio y todo el esfuerzo que has dedicado en SEO y pagerank. No pierdas tu URL con otros servicios que hacen lo mismo.

+57.6% en tu métrica Click-Through Rate

Expande tu funnel atrayendo aún más usuarios a tu sitio web.
Showing how previously the link previews were bad on an cellphone and how much they improved with Flyyer

Añade branding a tus links

Automáticamente añade tu marca y mejora tus links con contenido especial. Una imágen vale más que mil palabras.

Construye confianza desde la primera impresión

Hay un mar de información en internet y el contenido se pierda fácilmente. Haz que tus post sean relevantes otra vez.

Entrega contenido en menos tiempo

Desde el momento que creas contenido en tu sitio web tendrás lista una colección de imágenes para publicar en redes sociales.

Diseño que escala

Gasta menos tiempo en tareas repetitivas de diseño y dedica lo ahorrado en tareas donde los humanos somos los mejores: siendo creativos.

Próximamente!

Flyy.ly links cortos con tu marca

Acortador de URLs para la siguiente generación de links y que genera confianza en tu audiencia.

Obtén mejores insights

Comprende como se comparte el contenido de tu sitio web

¿Qué red social?

La mayoría de los servicios de analítica solo pueden comenzar a hacer el seguimiento cuando los usuarios visitan los sitios web. Flyyer está un paso adelante.

¿Qué artículos son más populares?

Las visitas al sitio y las ventas no son lo mismo. Te ayudamos a comprender mejor el comportamiento de tus clientes de acuerdo a cada producto o publicación.

¡Mi publicación se volvió viral!

Te notificamos cuando un link se comparte con frecuencia. ¡Así puedes actuar rápido!

women studying their website share analytics

Prueba nuestra aplicación web gratuita

Comprueba como se ven tus links antes de publicarlos.

Descubre SocialPreview.io

flyyer.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 { FlyyerRender } from "@flyyer/flyyer";
const flyyer = new FlyyerRender({
tenant: "flyyer",
deck: "charming-man",
template: "main",
variables: { title: "Atrae más personas a tu sitio" },
});
<meta property="og:image" content={flyyer.href()} />
<meta name="twitter:image" content={flyyer.href()} />
Esta imagen fue creada usando Flyyer.ioCambia la <meta property="og:image" /> de tu sitio por un link de Flyyer. Revisa nuestras guías de integración.www.flyyer.io
https://www.flyyer.io/es/demo
import React from "react"
import { Variable as V, Static } from '@flyyer/variables';
import { TemplateProps } from "@flyyer/types";
import clsx from "clsx";
import "../styles/tailwind.css";
import logo from "../static/logo.svg";
// Export 'schema' to declare variables
export const schema = V.Object({
title: V.String({ default: "This is a variable" }),
img: V.Image({ default: "/background.jpeg" }),
});
type Variables = Static<typeof schema>;
// https://cdn.flyyer.io/render/v2/flyyer/charming-man/main.jpeg?title=Atrae+m%C3%A1s+personas+a+tu+sitio
export default function MainTemplate({ variables, width, height, agent }: TemplateProps<Variables>) {
// Get parsed variables from querystring
const { title, img } = variables;
// Render component to image based on context
if (agent.name === FlyyerAgentName.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)} />;
}

Crea templates públicos y privados

Use tus tecnologías web favoritas como React, Vue o Tailwind para crear plantillas para tus propios proyectos o para compartirlas con la comunidad.

$ npm init flyyer-app@latest hello
? Select template setup:
react
react-styled-components
react-typescript-styled-components
react-typescript-tailwind
vue
vue-typescript
$ NODE_ENV=production npm run-script build
🌠 flyyer project successfully built!
$ npm run-script deploy
🖼 Created template with URL:
- https://cdn.flyyer.io/render/v2/flyyer/hello/main.png?title=Hello+World

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

1 mil+

Imágenes generadas

582.804+

Datos descargados

45GB+

Disponibilidad

99.95%

Precios y planes

Todos los planes cuentan con créditos renovables, acceso a nuestro dashboard y templates gratis.

Gratuito

Prueba Flyyer sin compromiso para sitios web con pocas páginas.

Gratis

No credit card required

Crear cuenta
  • 20 páginas web

  • 300 créditos/mes

  • 3 proyectos

  • 1 usuarios(s)

  • Firma digital

Hobby

Para pequeños proyectos con pocas páginas

$12/mes

Obtén 2 meses gratis pagando anualmente

Seleccionar plan
  • 200 páginas web

  • 3000 créditos/mes

  • 3 proyectos

  • 3 usuarios(s)

  • URLs con firma digital

  • Analytics

Pro

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

$36/mes

Obtén 2 meses gratis pagando anualmente

Seleccionar plan
  • 1000 páginas web

  • 10.000 créditos/mes

  • 3 proyectos

  • 5 usuarios(s)

  • Todo del plan Hobby

  • Imágenes Full HD

Escala

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

$72/mes

Obtén 2 meses gratis pagando anualmente

Seleccionar plan
  • 3000 páginas web

  • 30.000 créditos/mes

  • 3 proyectos

  • Unlimited usuarios(s)

  • 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

El equipo Flyyer.io

Este proyecto es desarrollado por solo dos ingenieros de Santiago, Chile 🇨🇱