Customization Options

Available Customizations

We offer these customization options to match your website's design:

Option	Description	Default
data-theme	Visual theme (light/dark)	light
data-scale	Size of compact badge	0.5
data-expanded-scale	Size of hover card	1.0

Interactive Demo

Our live widget demo with different themes and sizes:

→ View Here

See real widgets with light/dark themes and various scaling options side-by-side.

Theme Selection

Light Theme (Default)

For websites with light backgrounds:

<script 
  src="https://api.tokenomics.com/v1/widget/embed.js" 
  data-project-slug="your-project-slug"
  data-theme="light"
  async>
</script>

Light Theme Widget

Dark Theme

For sites with dark backgrounds:

<script 
  src="https://api.tokenomics.com/v1/widget/embed.js" 
  data-project-slug="your-project-slug"
  data-theme="dark"
  async>
</script>

Dark Theme Widget

Size Adjustments

Compact Badge Scaling

Adjust the size of the main widget badge:

<!-- 40% size -->
<script 
  src="https://api.tokenomics.com/v1/widget/embed.js" 
  data-project-slug="your-project-slug"
  data-scale="0.4"
  async>
</script>

<!-- 30% size -->
<script 
  src="https://api.tokenomics.com/v1/widget/embed.js" 
  data-project-slug="your-project-slug"
  data-scale="0.3"
  async>
</script>

Expanded Card Scaling

Control the size of the expanded hover card independently:

<!-- Smaller hover card for mobile compatability -->
<script 
  src="https://api.tokenomics.com/v1/widget/embed.js" 
  data-project-slug="your-project-slug"
  data-expanded-scale="0.4"
  async>
</script>

Limitations

Fixed Design Elements

These design aspects cannot be customized:

• Font family and sizes

• Color scheme (beyond light/dark)

• Logo and branding

• Layout and spacing

• Animation timing

If you need extensive customization beyond these options, consider using our REST API to build a custom integration.

Contact us on Telegram or fill out the Contact form for an API key.