Updated

Hey Portals Open Graph Spec

Portals turn content into interactive apps on Hey, using Facebook's OpenGraph to make dynamic experiences from static embeds. Hey Portal are also compatible with Farcaster Frames.

Required

Portal's semver version: hey:portal

Example: v1.0.0, v1.0.1-beta, vLatest

Portal Image: hey:portal:image or og:image

Portal POST request URL: hey:portal:post_url

Portal buttons: hey:portal:button:{1-4}

Portal button type: hey:portal:button:{1-4}:type

Can be submit or redirect

txn coming soon

Example meta tag

<meta property="hey:portal" content="v1.0.0" />
<meta
  property="hey:portal:image"
  content="https://example.com/image.png"
/>
<meta
  property="hey:portal:post_url"
  content="https://api.example.com/onclick"
/>

<meta property="hey:portal:button:1" content="⏪" />
<meta property="hey:portal:button:1:type" content="submit" />

<meta property="hey:portal:button:2" content="⏩︎" />
<meta property="hey:portal:button:2:type" content="submit" />

Respond to clicks

Upon user interaction with the button, it's necessary to create or refresh the OpenGraph tags associated with the post's URL.

Here is an example of how you can do it in Node.js

res.send(`
  <!DOCTYPE html>
  <html>
    <head>
      <meta property="hey:portal" content="v1.0.0" />
      <meta
        property="hey:portal:image"
        content="https://example.com/image1.png"
      />
      <meta
        property="hey:portal:post_url"
        content="https://api.example.com/onclick"
      />
      <meta property="hey:portal:button:1" content="⏪" />
      <meta property="hey:portal:button:1:type" content="submit" />
    </head>
  </html>
`);

Payload to the post URL on the button click

We dispatch small amounts of data at Hey, which may benefit portal applications.

trustedData

The address and profileId have been authenticated through the Lens access token, ensuring reliable information.

untrustedData

The information has also been validated and verified, we just added it to ensure it is compatible with Farcaster Frames.

{
  "trustedData": {
    "address": "0x03Ba34f6Ea1496fa316873CF8350A3f7eaD317EF",
    "buttonIndex": 2,
    "fid": "0x0d",
    "network": 137,
    "profileId": "0x0d",
    "publicationId": "0x0d-0x01",
    "timestamp": 1630483200,
    "url": "https://example.com/api"
  },
  "untrustedData": {
    "address": "0x03Ba34f6Ea1496fa316873CF8350A3f7eaD317EF",
    "buttonIndex": 2,
    "fid": "0x0d",
    "network": 137,
    "profileId": "0x0d",
    "publicationId": "0x0d-0x01",
    "timestamp": 1630483200,
    "url": "https://example.com/api"
  }
}