Guides

Customize SIWN

Customize the Farcaster sign in experience for your users

Suggest Edits

🌟

Sign In with Neynar (SIWN) is the easiest way to let users connect their Farcaster account to your app

See here on how to integrate in less than a min.

This guide shows you how to customize the sign in experience for your users. The SIWN button on your app can be customized as you see fit. Below is how it shows up by default:

Check demo.neynar.com to try out live customizations. Below are some of the attributes you can change in the code when integrating:

data-variant :

  • Values: neynar, warpcast, farcaster
  • defaultValue: neynar
  • dataType: string

data-theme : Theme of button

  • Values: light (#ffffff) [default] , dark (#000000)
  • defaultValue: light
  • Applicable for data-variant. Not for Custom Text + Logo (data-text and data-custom_logo_url)
  • data-background_color can override the colour data-theme color
  • dataType: string

data-logo_size : Logo size for data-variant

  • defaultValue: 30px
  • dataType: string (Takes values similar to a css property eg. 40px or 40 or 4rem)
  • Applicable for data-variant. Not for data-custom_logo_url

data-height :

  • defaultValue: 48px
  • dataType: string (Takes values similar to a css property eg. 40px or 40 or 4rem)
  • Applicable for data-variant and Custom Text + Logo (data-text and data-custom_logo_url)

data-width :

  • defaultValue: 218px (By default minWidth is set to 205px but it can be modified using data-styles)
  • dataType: string (Takes values similar to a css property eg. 40px or 40 or 4rem)
  • Applicable for data-variant and Custom Text + Logo (data-text and data-custom_logo_url)

data-border_radius :

  • defaultValue: 10px
  • dataType: string (Takes values similar to a css property eg. 40px or 40 or 4rem or ‘10px 20px 30px 40px’)
  • Applicable for data-variant and Custom Text + Logo (data-text and data-custom_logo_url)

data-font_size :

  • defaultValue: 16px
  • dataType: string (Takes values similar to a css property eg. 40px or 40 or 4rem)
  • Applicable for data-variant and Custom Text + Logo (data-text and data-custom_logo_url)

data-font_weight :

  • defaultValue: 300
  • dataType: string (Takes values similar to a css property eg. 100 or normal)
  • Applicable for data-variant and Custom Text + Logo (data-text and data-custom_logo_url)

data-padding :

  • defaultValue: ‘8px 15px’
  • dataType: string (Takes values similar to a css property eg. 40px or 40 or 4rem or ‘10px 20px 30px 40px’)
  • Applicable for data-variant and Custom Text + Logo (data-text and data-custom_logo_url)

data-margin :

  • defaultValue: 0px
  • dataType: string (Takes values similar to a css property eg. 40px or 40 or 4rem or ‘10px 20px 30px 40px’)
  • Applicable for data-variant and Custom Text + Logo (data-text and data-custom_logo_url)

data-text :

  • defaultValue: “”
  • dataType: string
  • Applicable for Custom Text + Logo (data-text and data-custom_logo_url)
  • For this data-variant should not be present

data-color :

  • defaultValue: #000000
  • dataType: string (Takes values similar to a css property eg. red or #e2e2e2)
  • Applicable for data-variant and Custom Text + Logo (data-text and data-custom_logo_url)

data-background_color :

  • defaultValue: #ffffff
  • dataType: string (Takes values similar to a css property eg. red or #e2e2e2)
  • Applicable for data-variant and Custom Text + Logo (data-text and data-custom_logo_url)

data-styles :

  • defaultValue: “”
  • dataType: string
  • Applicable for data-variant and Custom Text + Logo (data-text and data-custom_logo_url)
  • overrides all the above styles
  • example: data-styles='{ "backgroundColor": "red" }'

data-custom_logo_url : Hosted logo (preferably svg)

  • defaultValue: “”
  • dataType: string
  • Applicable for Custom Text + Logo (data-text and data-custom_logo_url)
  • Note: size of the logo should be adjusted within svg itself

Updated 2 months ago