Hey devs!DevelopersCreate templates with React.jsFlyyer.io API

Og:Image as a Service

Take control over your links

Flyyer is the first platform to manage your link previews and generate images for social media automatically.

<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

For users and developers

Centralized dashboard for your previews

Setup rules for your links using drag-and-drop or use Express.js-like routes to handle all your pages.

Enhance your online presence

Flyyer 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. Flyyer 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 Flyyer

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.

Coming soon!

Flyy.ly branded short links

Next generation URL shortener that your audience can trust.

Get better insights

Understand how people share your website

Which social network?

Most analytics services can only start tracking when the user visits your website. Flyyer is one step ahead.

Which items are more popular?

Sales are different than traffic. Understand customer behavior around each product or post.

My post is going viral!

Get alerts when an item is being shared frequently. Act fast!

women studying their website share analytics

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

flyyer.io

Og:Image as a Service

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

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

Create public and private templates today.

Use your favorite web technologies such as React, Vue and Tailwind to create templates for your own projects or share them with the community.

$ 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

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

1K+

Images delivered

582,804+

Data served

45GB+

Availability

99.95%

Pricing and plans

Get started for free. Every plan comes with renewable credits, access to our dashboard and free templates.

Free Tier

For small websites. No strings attached, try Flyyer for free.

Free

No credit card required

Create account
  • 20 website pages

  • 300 credits/mo

  • 3 projects

  • 1 user(s)

  • Signed URLs

Hobby

For small project with few amount of pages to share.

$12/mo

Get 2 months for free with anual billing

Select plan
  • 200 website pages

  • 3,000 credits/mo

  • 3 projects

  • 3 user(s)

  • Signed URLs

  • Analytics

Pro

High volume for companies with many projects and websites to share.

$36/mo

Get 2 months for free with anual billing

Select plan
  • 1,000 website pages

  • 10,000 credits/mo

  • 3 projects

  • 5 user(s)

  • Everything in Hobby

  • Full HD images

Scale

Massive amount of images for popular and viral websites.

$72/mo

Get 2 months for free with anual billing

Select plan
  • 3,000 website pages

  • 30,000 credits/mo

  • 3 projects

  • Unlimited user(s)

  • Everything in Hobby

  • Full HD images

  • Priority support

An impression is a metric used to quantify the number of views or engagement of images. Some platforms may store images in their own cache systems from time to time, you won't be charged in those cases.

Prices in US dollars. May be automatically converted to your local currency on checkout.

Enterprise plans with premium support

Custom solutions, dedicated servers, on-premise installation, and design/development services.

Priority service

If you are dealing with high traffic or you just don't want to worry about quotas, this plan might be for you. We also include dedicated service for additional security and faster delivery times.

What can be included

  • Unlimited images

  • Dedicated servers

  • Design and engineering consulting

  • Improved speed, security and privacy

  • On-premise setup

  • Shared Slack channel with the founding team

Superpower your marketing

Contact us

The people behind Flyyer.io

This project is brought to you by only two engineers from Santiago, Chile 🇨🇱

  • Profile picture

    Patricio López J.

    Co-Founder / Tech and everything

  • Profile picture

    Franco Mendez Z.

    Co-Founder / Tech and everything

  • Official Discord logo

    Official Discord

    Join our channel

  • Official Telegram logo

    Official Telegram

    Join our group