attest.ink Documentation

Welcome to the attest.ink documentation. Learn how to implement beautiful, customizable AI attribution badges in your projects.

What is attest.ink?

attest.ink provides standardized badges for transparent AI attribution. In an era where AI-assisted content creation is becoming ubiquitous, these badges help maintain transparency and build trust with your audience.

Quick Start

Get up and running in less than a minute with our CDN-hosted solution.

1. Include the CSS

<link rel="stylesheet" href="https://attest.ink/css/badge-variants.css?v=6">

2. Add a Badge

<a href="https://attest.ink" class="ai-badge ai-badge-medium ai-badge-glass">
    <svg class="ai-logo" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="1.5"/>
        <path d="M8 12C8 9.79086 9.79086 8 12 8C14.2091 8 16 9.79086 16 12C16 14.2091 14.2091 16 12 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
        <circle cx="12" cy="12" r="2" fill="currentColor"/>
        <path d="M12 6V8M12 16V18M18 12H16M8 12H6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
    </svg>
    <span>Made with AI</span>
</a>

Result:

Made with AI

Installation

CDN (Recommended)

The easiest way to get started is by including our CSS files via CDN:

<!-- Modern badge system -->
<link rel="stylesheet" href="https://attest.ink/css/badge-variants.css?v=6">

<!-- Optional: Backward compatibility for legacy badges -->
<link rel="stylesheet" href="https://attest.ink/css/badge-compatibility.css?v=6">

Download

You can also download the CSS files and host them yourself:

Download badge-variants.css Download badge-compatibility.css

NPM (Coming Soon)

npm install @attest-ink/badges

Basic Usage

Option 1: Simple PNG Badges

For less technical users or quick implementation, use our pre-made PNG badges:

<img src="https://attest.ink/badges/ai-glass-medium.png" 
     alt="Made with AI" 
     width="120" 
     height="32">

Browse PNG Badges →

Option 2: HTML/CSS Badges

For full customization and interactivity, use our CSS-based badges:

<a href="https://attest.ink" class="ai-badge [size] [style] [platform]">
    <svg class="ai-logo">...</svg>
    <span>Badge Text</span>
</a>

Class Breakdown

  • ai-badge - Required base class
  • [size] - Size variant (e.g., ai-badge-medium)
  • [style] - Style variant (e.g., ai-badge-glass)
  • [platform] - Optional platform-specific styling (e.g., ai-badge-claude)

Badge Styles

Choose from 10+ professionally designed styles:

Glass ai-badge-glass
Solid ai-badge-solid
Outline ai-badge-outline
Gradient ai-badge-gradient

Badge Sizes

Six size variants to fit any design:

Micro

ai-badge-micro - 20px

Mini

ai-badge-mini - 24px

Small

ai-badge-small - 28px

Medium

ai-badge-medium - 32px

Large

ai-badge-large - 40px

XL

ai-badge-xl - 48px

Dark Mode

All badges automatically adapt to your site's dark mode. Simply wrap your content with a dark mode indicator:

<!-- Using data attribute -->
<body data-theme="dark">
    <!-- Badges will automatically use dark mode styles -->
</body>

<!-- Using CSS class -->
<body class="dark-mode">
    <!-- Add corresponding CSS -->
</body>

Light Mode

Made with AI

Dark Mode

Made with AI

Platform-Specific Badges

Add platform-specific styling to indicate which AI service was used:

Claude ai-badge-claude
ChatGPT ai-badge-chatgpt
Gemini ai-badge-gemini

Badge Positioning

Control badge placement with position utility classes:

<!-- Bottom right (default) -->
<div class="badge-position-bottom-right">
    <a href="#" class="ai-badge ai-badge-medium ai-badge-glass">...</a>
</div>

<!-- Fixed positions -->
<a href="#" class="ai-badge ai-badge-medium ai-badge-glass ai-badge-fixed-bottom-right">...</a>

Available Positions

  • badge-position-bottom-right - Bottom right of container
  • badge-position-bottom-left - Bottom left of container
  • badge-position-top-right - Top right of container
  • badge-position-top-left - Top left of container
  • ai-badge-fixed-bottom-right - Fixed to viewport bottom right
  • ai-badge-fixed-bottom-left - Fixed to viewport bottom left

Custom Styling

Override default styles with CSS variables or custom classes:

/* Custom colors */
.my-custom-badge {
    --badge-ai-primary: #your-color;
    --badge-ai-secondary: #your-color;
}

/* Custom size */
.ai-badge-custom {
    padding: 8px 16px;
    font-size: 14px;
}

.ai-badge-custom .ai-logo {
    width: 20px;
    height: 20px;
}

JavaScript API

For dynamic badge management, use our JavaScript API:

<script src="https://attest.ink/js/attest.js"></script>
<script>
// Add badge to element
AttestInk.addBadge('ai', '#my-content', {
    style: 'glass',
    size: 'medium',
    position: 'bottom-right',
    platform: 'claude'
});

// Remove badge
AttestInk.removeBadge('#my-content');

// Update badge
AttestInk.updateBadge('#my-content', {
    platform: 'chatgpt',
    style: 'solid'
});
</script>

Framework Integration

React

import { AIBadge } from '@attest-ink/react';

function Article() {
    return (
        <article>
            <h1>My Article</h1>
            <p>Content...</p>
            <AIBadge 
                style="glass" 
                size="medium" 
                platform="claude"
                position="bottom-right"
            />
        </article>
    );
}

Vue

<template>
    <article>
        <h1>My Article</h1>
        <p>Content...</p>
        <AIBadge 
            :style="'glass'" 
            :size="'medium'" 
            :platform="'gemini'"
            :position="'bottom-right'"
        />
    </article>
</template>

<script>
import { AIBadge } from '@attest-ink/vue';

export default {
    components: { AIBadge }
};
</script>

Blog Post Example

Add attribution badges to blog posts:

<article class="blog-post">
    <header>
        <h1>Understanding AI in Content Creation</h1>
        <div class="meta">
            <span>By John Doe</span>
            <span>Dec 24, 2024</span>
        </div>
    </header>
    
    <div class="content">
        <p>Article content...</p>
    </div>
    
    <footer>
        <a href="https://attest.ink" class="ai-badge ai-badge-small ai-badge-glass">
            <svg class="ai-logo">...</svg>
            <span>AI Assisted</span>
        </a>
    </footer>
</article>

Image Attribution

Add badges to AI-generated images:

<figure class="ai-image">
    <img src="generated-image.jpg" alt="AI Generated Landscape">
    <a href="https://attest.ink" class="ai-badge ai-badge-small ai-badge-solid ai-badge-dalle ai-badge-fixed-top-right">
        <svg class="ai-logo">...</svg>
        <span>DALL-E</span>
    </a>
    <figcaption>Mountain landscape created with DALL-E</figcaption>
</figure>

Migration Guide

Upgrading from legacy badges? Follow this guide:

Old Implementation

<a href="https://attest.ink" class="badge-link">
    <img src="https://attest.ink/assets/badges/ai-generated.svg" width="120" height="30">
</a>

New Implementation

<a href="https://attest.ink" class="ai-badge ai-badge-medium ai-badge-glass">
    <svg class="ai-logo">...</svg>
    <span>Made with AI</span>
</a>

Note: Legacy badges will continue to work. Include badge-compatibility.css for full backward compatibility.

Troubleshooting

Badge not appearing?

  • Ensure CSS files are loaded correctly
  • Check for CSS conflicts with your existing styles
  • Verify the SVG icon is included in the badge HTML

Dark mode not working?

  • Ensure your site uses data-theme="dark" attribute
  • Check that CSS variables are not being overridden

Position classes not working?

  • Parent container needs position: relative for absolute positioning
  • Fixed position classes work independently of parent containers

Contributing

We welcome contributions to attest.ink! Here's how you can help:

Report Issues

Found a bug? Open an issue on GitHub.

Submit Pull Requests

  1. Fork the repository
  2. Create a feature branch
  3. Make your changes
  4. Submit a pull request

Development Setup

git clone https://github.com/statusdothealth/attest.ink.git
cd attest.ink
# Open index.html in your browser