Customization

GEO elements automatically inherit your website's branding, but you can further customize their appearance and behavior.

Automatic Brand Detection

By default, GEO detects and applies:

  • Primary and secondary colors from your CSS
  • Font families used on your site
  • Border radius and spacing patterns
  • Light/dark mode preferences

Manual Configuration

Override automatic detection through the dashboard:

Colors

// Example configuration
{
  "colors": {
    "primary": "#2862ff",
    "secondary": "#333333",
    "background": "#ffffff",
    "text": "#111111"
  }
}

Typography

{
  "typography": {
    "headingFont": "Inter, sans-serif",
    "bodyFont": "Georgia, serif",
    "fontSize": "16px"
  }
}

Element Placement

Configure where elements appear:

  • Before content: Elements appear above the article
  • After content: Elements appear below the article
  • Sidebar: Elements appear in a designated sidebar area
  • Custom selector: Specify a CSS selector for placement

CSS Overrides

All GEO elements have specific CSS classes you can target for custom styling. See the CSS reference section for complete class documentation.

Content Selection

Configure which content receives GEO treatment:

  • Include/exclude by URL pattern
  • Include/exclude by content type
  • Minimum content length threshold
  • Category-based rules

Language Support

GEO supports multiple languages. The script automatically detects content language and generates elements in the appropriate language.