Integrating Glyph

This guide explains how to use the Glyph Unified Bundle served from CDN to embed the Glyph widget into your site or app.

CDN Bundle

<https://glyph-core.s3.us-east-1.amazonaws.com/test/Glyph-unified-bundle.js>

Quickstart

Add the CDN script to your page and initialize the widget:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Glyph Widget</title>
  <script src="<https://glyph-core.s3.us-east-1.amazonaws.com/test/Glyph-unified-bundle.js>"></script>
</head>
<body>
  <script>
    window.Glyph.initWidget({
      theme: {
        logo: "<https://example.com/logo.png>",
        primaryColor: "#fc6432",
        backgroundBlur: "2px",
        placement: "bottom-right",
        theme: "dark",
      },
      supportedChains: ["ethereum", "polygon"],
    });
  </script>
</body>
</html>

Reference Example

<script>
  window.Glyph.initWidget({
    theme: {
      logo: "<https://drive.google.com/file/d/1QbNkh-EiX3T_yo8E_ZYXIVDLmV0ubJ8h/view?usp=sharing>",
      primaryColor: "#fc6432",
      backgroundBlur: "2px",
      placement: "bottom-right",
      theme: "dark",
    },
    supportedChains: ["ethereum", "polygon"],
  });
</script>

Options

theme (object, optional)

Controls basic colors, typography, blur, placement, and theme mode.

Property
Type
Description

logo

string

URL to your application logo

primaryColor

string

Primary brand color (hex format)

backgroundBlur

string

Background blur intensity

placement

string

Widget screen position

theme

string

Color scheme ("dark" or "light")

supportedChains (string[], optional)

List of chain identifiers for filtering/validation. Example: ["ethereum", "polygon"]

Chains

  • Strings are case-insensitive for comparison during validation

  • If no list is provided, basic structure still works and validation accepts most inputs

PreviousWhy UnifiedID stays privateNextFramework Integration

Last updated