Hey Developers!DevelopersTry our Flayyer.io APIFlayyer.io API

Generate social media images from your website

Automatically create engaging marketing images in multiple formats for your social media and link previews.

Demo of multiple images generated from a webpage

https://flayyer.ai/v2

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

Enhance your online presence

Flayyer provides all technology to ensure the best image for each of your pages.

Take control over your link previews

The first thing people sees before anything is the image attached to your links, known as og:image. Flayyer enables companies to create and manage those images.

Keep your own URL

Respect your domain and all the effort your team puts on SEO and pagerank. Don't ditch your URL with other services.

+57.6% Click-Through Rate

Expand your funnel by attracting even more users to your website.
Showing how previously the link previews were bad on an cellphone and how much they improved with Flayyer

Brand your links

Automatically add your brand and enhance your links with rich information. A picture is worth a thousand words.

Build trust from the first impression

There is a sea of information on the internet and content gets lost easily. Make your posts relevant.

Deliver content in less time

From the moment you publish content on your website you will have a set of images to share on social media.

Design that scales

Spend less time in repetitive design tasks, leave that to computers. Focus on what makes us humans: creativity.

Try our free online tool to preview your website

Find out how your links look like before even posting them on social media.

Open SocialPreview.io

flayyer.io

Og:Image as a Service

Create templates with React.js and Vue.js. Upload your amazingly crafted flayyers to our cloud and use them to render thousand of images.

Get started
import { FlayyerIO } from "@flayyer/flayyer";
const flayyer = new FlayyerIO({
tenant: "flayyer",
deck: "demo",
template: "main",
variables: { title: "Create more engagement" },
});
<meta property="og:image" content={flayyer.href()} />
<meta name="twitter:image" content={flayyer.href()} />
This image was rendered using Flayyer.ioCreate, deploy and update the <meta property="og:image" /> of your website. Checkout the integration guides.flayyer.com
https://flayyer.com/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)} />;
}

Globally distributed service with edge technology

Ensures the best experience for users by delivering fast responses when a link is shared thanks to our global caching system.

PlanetPlanet avatar 01Planet avatar 02

Templates created

642+

Images delivered

473,367+

Data served

36.2GB+

Availability

99.95%