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.

Get started

Contact sales

https://flayyer.ai/v2

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

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

0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
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.

Templates created

499+

Images delivered

262,824+

Data served

19.8GB+

Availability

99.95%

90% of companies neglect their previews

Businesses spend thousands of dollars on advertisements but people keep ignoring them.
When users share your links, there is a higher chance of getting clicks. Don't miss that opportunity.