Metadata and Link Format

Metadata and Custom Links

Sites can have metadata attached to them in three ways:

• Embedding a meta tag with the Translucent overrides inside.
• Sharing via the Customize view (or with a link crafted by hand)
• Inclusion in https://translucent.directory

Adding a meta tag for a site you manage

Include this meta tag to provide default values for the translucent window. The content is a query parameter string that matches the links, above.

<meta name="widget" content="?v=1&size=400x600">

Creating a translucent link for customizing other sites

The basic form for a translucent link is: widget-https://example.com/path or https://translucent.site/example.com/path

Extra Options

Extra options can be added to the end of a link by adding "?v=1" followed by other parameters: widget-https://example.com?v=1&size=400x600&zoom=0.5 Note that this can follow a standard query index.html?ic=x?v=1&..., and will be removed when rendered.

Not all of these options are exposed in the UI, but some may be customized on the backside.

Parameters

key	value	notes
name	string	name for widget
icon	string	system icon name
style	string	transparent, glass
bg	hex	background color
fg	hex	text color
tint	hex	tint color
size	size	base size (300x400)
min	size	min size
max	size	max size
zoom	float	zoom level
agent	string	user agent, mobile, desktop, or custom
vw	int	viewport width
remove	string	css selector for items to remove
clear	string	css selector for items with transparent background
config	json	json block of native UI properties (see below)

{
  "tabs": [ // Tabs to be shown to the left of the window
    {"label": "label", "image": "sf.symbol", "url": "https: or javascript:..."}
  ],
  "tools": [ // Tools displayed below the window
    {"label": "label", "image": "sf.symbol", "url": "https: or javascript:..."}
  ]
  "settings": [ // Additional settings shown on the configuration window
    {"label": "label", "image": "sf.symbol"}
  ]
}