url parameters

All colour and style parameters are passed as URL query strings. Values must be URL-encoded (e.g. #0a0a0a → %230a0a0a).

Full parameter reference

Parameter	CSS Variable	Description	Default
bg	--bg	Main background colour	#0a0a0a
bg2	--bg2	Secondary background (header, footer)	#111111
bg3	--bg3	Surface colour (cards, inputs)	#1a1a1a
text	--text	Primary text colour	#ffffff
text2	--text2	Secondary text colour	#888888
text3	--text3	Muted text colour	#444444
accent	--accent	Primary accent colour	#ffffff
accent2	--accent2	Secondary accent colour	#e0e0e0
border	--border	Border colour	#2a2a2a
msgbg	--msg-bg	Message bubble background	#1a1a1a
msgownbg	--msg-own-bg	Own message bubble background	#2a2a2a
disclaimer	--disclaimer-color	"Not financial advice" bar colour	#d97706
radius	--radius	Border radius	8px

Built-in presets

Instead of specifying every parameter, you can use one of the built-in presets via the Widget Builder. The presets are:

Dark (Default)

bg=#0a0a0a  bg2=#111111  text=#ffffff  accent2=#e0e0e0  border=#2a2a2a
msgbg=#1a1a1a  msgownbg=#2a2a2a  disclaimer=#d97706

White

bg=#ffffff  bg2=#f5f5f5  text=#111111  accent2=#333333  border=#e0e0e0
msgbg=#f0f0f0  msgownbg=#e8e8e8  disclaimer=#b45309

Midnight Blue

bg=#020818  bg2=#040d20  text=#e0eaff  accent2=#3b82f6  border=#0f1f40
msgbg=#060f28  msgownbg=#0a1a38  disclaimer=#f59e0b

Forest

bg=#020f08  bg2=#051a0d  text=#e0f5e9  accent2=#22c55e  border=#0a2e14
msgbg=#061a0a  msgownbg=#0a2a10  disclaimer=#f59e0b

Example URLs

Dark theme (default):

https://widget.yaphub.xyz/token/CONTRACT_ADDRESS

White theme:

https://widget.yaphub.xyz/token/CONTRACT_ADDRESS?bg=%23ffffff&bg2=%23f5f5f5&text=%23111111&accent2=%23333333&border=%23e0e0e0&msgbg=%23f0f0f0&msgownbg=%23e8e8e8

Custom brand colour (blue accent):

https://widget.yaphub.xyz/token/CONTRACT_ADDRESS?bg=%230a0a0a&accent2=%233b82f6&disclaimer=%233b82f6

Using the Widget Builder

The easiest way to configure colours is the Widget Builder at yaphub.xyz/integration. It provides colour pickers for every parameter and shows a live preview of the widget. The final embed code with all parameters is generated automatically.