Skip to main content

@flyyer/flyyer

Repository: https://github.com/useflyyer/flyyer-js

Installation#

This module is agnostic to any JS framework and supports TypeScript out of the box.

1. Install @flyyer/flyyer#

Terminal.app
yarn add @flyyer/flyyer

2. Format Flyyer CDN URLs for your meta-tags#

Find your project identifier here. If you don't have a project yet, create one here.

Now you can format Flyyer CDN URLs like shown below.

import { Flyyer } from "@flyyer/flyyer";
const flyyer = new Flyyer({  // Your project identifier  project: "your-project-identifier",  // Current pathname of your website, try to set it dynamically  path: `/path/to/product`,});
// Use this smart image link in your <head/> tagsconst url = flyyer.href();// > https://cdn.flyyer.io/v2/your-project-identifier/_/__v=1618281823/path/to/product

If you are using React, you should use this URL as content of some of your HTML's head tags to render link previews:

// This is just an illustrative example, it depends on the framework you are using.function Head() {  return (    <head>      <meta property="og:image" content={url} />      <meta name="twitter:image" content={url} />      <meta name="twitter:card" content="summary_large_image" />    </head>  );}

Take a look into the Next.js, Gatsby.js or other JavaScript technologies integration guides to see a full example depending on your project setup.

note

The meta-tags code needs to be static, processed at build time or server-side rendered for link previews to work.

3. Voilà 🎉#

Now you're able to manage your link previews from your dashboard, create content from templates while preserving your brand style and export it as social media formats.

Go to your dashboard 🚀

Advanced usage#

Signed URLs#

The module @flyyer/flyyer supports HMAC and JWT signatures to prevent bad actors from using your URLs to create images.

Find your secret key here under Signed URLS, and enable the signing strategy you desire.

Usage:

import { Flyyer } from "@flyyer/flyyer";
const flyyer = new Flyyer({  project: "your-project-identifier",  path: `/path/to/product`,  secret: "your-secret-key",  strategy: "JWT", // or "HMAC"});
// Use this smart image link in your <head/> tagsconst url = flyyer.href();// > https://cdn.flyyer.io/v2/your-project-identifier/jwt-eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJwYXJhbXMiOnsiX19pZCI6ImplYW5zLTEyMyJ9LCJwYXRoIjoiXC9wYXRoXC90b1wvcHJvZHVjdCJ9.X8Vs5SGEA1-3M6bH-h24jhQnbwH95V_G0f-gPhTBTzE?__v=1618283086
note

Do not expose your secret key! Make sure Flyyer is instantiated at build time or server-side, so your secret is not exposed on the client.