[object Object][object Object][object Object][object Object][object Object][object Object][object Object][object Object]Turn your Website/app into a Frame (mini app) in Farcaster! | dTech Skip to content
dTech

Turn your Website/app into a Frame (mini app) in Farcaster!

We assume you are familiar with what a Farcaster Frame is. Additionally nothing more then minimal frontend development experience is assumed, we’ll go through each individual step.

Make the website render large with custom preview and action buttons

We can have our website render as a Farcaster Frame, so it shows up with our own big preview image and call to action button. The button will open a webpage in app, so we can use this either to show the URL shared or use it as call to action for marketing or lead generation.

A pure HTML simplest Frame Github Repo to see it all tied together is available here.

To achieve our website being embedded into Farcaster client’s like Warpcast nicely follow these steps

  1. Provide the metadata about the app/website in the HTML metadata:

    The Frame metadata is typed in JSON which we will fill in with our information. Please ensure the following properties about your metadata

    • imageUrl image is 3:2 format less than 10mb in size
    • the title as well as name are less than 32 characters
    • the splashImageUrl must be 200x200px and less than 1MB

    The full type specification can be found in the Frame specification

    The metadata JSON looks as follows:

    {
      "version": "next",
      "imageUrl": "https://dtech.vision/frame-thumbnail.png",
      "button": {
        "title": "THE Farcaster product studio",
        "action": {
          "type": "launch_frame",
          "name": "Learn Farcaster",
          "url": "https://dtech.vision/farcaster/",
          "splashImageUrl": "https://dtech.vision/splash.png",
          "splashBackgroundColor": "#f7f7f7"
        }
      }
    }

    The valid JSON is added to the HTML head section ( in Javascript/Typescript you may define it as a variable and then use JSON.stringify ).

    <meta
      property="fc:frame"
      content="<Insert metadata JSON here. Ensure it's valid JSON!>"
    />

  2. Add a .well-known/farcaster.json file to your website

    To generate the accountAssociation we will use the Warpcast mobile app (though if you have a valid signer you could also do this on your own)

    In Warpcast navigate to Settings > Developer > Domains where you can type in your domain e.g. dtech.vision to generate the domain manifest. If you don’t see the Developer menu, you may need to scroll down or go to Settings > Advanced > scroll down and enable Developer mode.

    Clicking generate domain manifest will give use the accountAssociation section and potentially a sample frame section we can paste and adjust to our needs. One such sample is as follows:

    {
      "accountAssociation": {
        "header": "",
        "payload": "",
        "signature": ""
      },
      "frame": {
        "name": "dTech - Farcaster docs",
        "version": "0.0.1",
        "iconUrl": "https://dtech.vision/icon.png",
        "homeUrl": "https://dtech.vision/farcaster",
        "splashImageUrl": "https://dtech.vision/splash.png",
        "splashBackgroundColor": "#f7f7f7",
        "webhookUrl": "https://dtech.vision/webhookurl"
      }
    }

  3. Call the frame SDK’s ready() function to hide the loading screen

    The frame SDK will show a loading screen until the frame is ready to be displayed. To hide this loading screen, call the ready() function. To get there we need to use the Farcaster Frame SDK. If we have a Typescript (or JS) project we can install and import the SDK. In case we don’t, we can embed the script directly:

    <script src="https://cdn.jsdelivr.net/npm/@farcaster/frame-sdk/dist/index.min.js"></script>
    <script>
      frame.sdk.actions.ready();
    </script>

    now that ready is called, the loading screen will be hidden and your webpage accessible via Farcaster Frame - your done!

    For users of Typescript (or JS) we install the frame-sdk

    bun add @farcaster/frame-sdk

    now on our page we call the ready function. The following is a simplified visualisation of a Hello World page, adapt this to your application.

    import sdk from "@farcaster/frame-sdk";
    

    export function Home() {
    

      sdk.actions.ready();
    

      return (
       <div>
         Hello from dTech!
       </div>
      )
    }

    Try loading your website as Frame in the developer playground after deploying it.

A pure HTML simplest Frame Github Repo to see it all tied together is available here.