Getting started
What's this documentation for
You'll learn to create your own templates, which you can use for your link previews, download social media formats, or offer them in the Marketplace.
Alternatively, you can integrate Flyyer to manage link previews and social media images enriched from your website (no effort required). You can choose templates that are already available. Check it out before coming here.
Create deck
Create a new Flyyer app using create-flyyer-app
, which sets up everything automatically for you. To start a deck follow the steps below.
- Yarn
- NPM
Using Yarn will create a folder called my-deck
in your current directory:
yarn create flyyer-app my-deck
Using NPM will create a folder called my-deck
in your current directory:
npm init flyyer-app@latest my-deck
You will be prompted for startup configurations. Choose the one that best suits your needs.
? Select the best template setup for you โฆ You can customize the template later
react
react-styled-components
react-typescript-styled-components
react-typescript-tailwind
vue
vue-typescript
Your first template
CLI
For more details about the available commands refer to Command-Line Interface.
Create (if you don't have) a file with the desired name of your template in a directory called templates
. Every deck created with create-flyyer-app
starts with a file named templates/main.js
, template/main.tsx
, or template/main.vue
.
Let's take https://github.com/useflyyer/create-flyyer-app/tree/master/templates/react as example
DECK-NAME/
โ ...
โโโ templates/
โ โโโ main.js
import React from "react";
import background from "../static/background.jpg";
import logo from "../static/logo.svg";
import "./styles.css"
// Make sure to 'export default' a React component
export default function MainTemplate({ variables }) {
const { title = "Hello world!", img = background, description, } = variables;
return (
<div>
<div className="layer background" style={{ backgroundImage: `url("${img}")` }} />
<div className="layer fade" />
<div className="layer content">
<img className="logo" src={logo} />
<h1 className="title">
{title}
</h1>
{description && (
<span className="description">
{description}
</span>
)}
</div>
</div>
);
}
- Yarn
- NPM
Start the development server with:
yarn start
Start the development server with:
npm start
caution
Please use Google Chrome, Firefox or Opera. Safari is not widely supported.
This command starts a development server using Parcel.js. Then open Flyyer Studio in your browser for a better developer experience.
Deploy
Work on your template, try changing the variables and when you are ready, run:
- Yarn
- NPM
NODE_ENV=production yarn build
NODE_ENV=production npm run-script build
To upload the final bundled templates to our cloud you must have an API Key.
Click here to manage your keys ๐
- Yarn
- NPM
When you are ready to deploy, run:
yarn run deploy
When you are ready to deploy, run:
npm run-script deploy
If everything is correct, you should see an output with your templates' URLs.
๐ผ Created template with URL: https://cdn.flyyer.io/render/v2/TENANT/DECK/TEMPLATE.jpeg
Congratulations! You deployed your first Flyyer deck! ๐
Here are some examples of how to pass parameters to create images:
- Set extension
https://cdn.flyyer.io/render/v2/TENANT/DECK/TEMPLATE.png
https://cdn.flyyer.io/render/v2/TENANT/DECK/TEMPLATE.jpeg
https://cdn.flyyer.io/render/v2/TENANT/DECK/TEMPLATE.webp
- Set dimensions:
- Instagram post:
https://cdn.flyyer.io/render/v2/TENANT/DECK/TEMPLATE.jpeg?_w=1080&_h=1080
- Whatsapp image:
https://cdn.flyyer.io/render/v2/TENANT/DECK/TEMPLATE.jpeg?_w=400&_h=400
- Story:
https://cdn.flyyer.io/render/v2/TENANT/DECK/TEMPLATE.jpeg?_w=1080&_h=1920
- Instagram post:
- Replace variables:
https://cdn.flyyer.io/render/v2/TENANT/DECK/TEMPLATE.jpeg?title=New+title
To format URL we recommend using one of official libraries.
Continue reading this documentation to understand more about Flyyer and what other amazing features we support.