2. Add the plugin to the plugins array in your
react-helmet to append the meta-tags to the
<head />. The plugin will make sure it works with static generation ("server-side") which is required for link previews. Then
@flayyer/flayyer to generate the smart image link along with
props.location from the page component to set the
This example is on the index page, but it should work on any of your pages as is.
If query params from your URL enrich your image preview, you can get them from
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.
@flayyer/flayyer supports HMAC and JWT signatures.
To find your
secret key, go to your dashboard > your project > Advanced settings > Signed URLS, and enable the signing strategy you desire.
Make sure FlayyerAI is instanciated at build time or server-side, so your secret is not exposed on the client. You're invited to contribute to this guide with your preferred method.