Guide to Customizing Yodl Preview Cards

Step 1: Upload Assets to GitHub

1. Prepare Your Assets:
   • Gather the assets you want to use for the preview card. Required files:
     • inner.png (suggested dimensions: 880x480)
     • outer.png (suggested dimensions: 1200x800)
     • overlay.png (suggested dimensions: 600x630)
2. Upload to GitHub:
   • Place your assets in a folder within a public repository on GitHub.
   • For reference, you can view the folder for the default preview card: Default Preview Card Folder.

Step 2: Verify the Preview Card

1. Generate Preview URL:

   • Go to Yodl OG Card Generator.

   • Enter the path to your folder in the baseURL field after /gh/ to preview your card. For example:

     <https://cdn.jsdelivr.net/gh/yodlpay/assets/og/default>
     

2. Check Your Preview:

   • Ensure the card looks correct.

Step 3: Edit your Yodl ENS record

You can edit the me.yodl record using either a yodl subdomain (via JustaName) or your own ENS domain (via ENS).

Option A: Using a Yodl subdomain (yourname.yodl.eth)

1. Access ENS settings

   • Open JustaName
   • Connect the wallet associated with your Yodl ENS subdomain
   • Go to Profile > Edit Profile > Custom

2. Retrieve existing me.yodl record

   • Locate the me.yodl record where your payment preferences are stored
   • Copy the existing JSON and paste it into a note or document for editing
   • Example:

   {"tokenSymbols":["USDT","USDC"]}
   

3. Add preview card information

   • Add the og key to define your preview card image
   • Example:

   {"tokenSymbols":["USDT","USDC"],"og":{"baseUrl":"<https://cdn.jsdelivr.net/gh/yodlpay/assets/og/default>"}}
   

4. Replace the me.yodl record

   • Copy the updated JSON
   • Replace the existing me.yodl record in JustaName.