Skip to main content

JavaScript Widget Overview

The VanityCert JavaScript Widget allows your users to provision SSL certificates directly on your website without redirecting to VanityCert's portal.

Features​

  • ✅ Zero Dependencies - Pure vanilla JavaScript, no frameworks required
  • ✅ Secure - Uses your backend as a proxy to keep API keys private
  • ✅ Customizable - Full theming support via CSS custom properties
  • ✅ Persistent State - LocalStorage-based state management per user
  • ✅ Responsive - Works on desktop, tablet, and mobile devices
  • ✅ 4-Step Process - Enter domain → Validate DNS → Issue certificate → Done
  • ✅ Auto-polling - Automatic status updates without manual refresh
  • ✅ Callback System - React to events in your application

Demo​

See the widget in action: Live Demo

VanityCert Widget

Quick Start​

1. Install the Widget​

via npm​

npm install @vanitycert/widget

via CDN​

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@vanitycert/widget@1/vanitycert.min.css">
<script src="https://cdn.jsdelivr.net/npm/@vanitycert/widget@1/vanitycert.min.js"></script>

2. Add Container Element​

<div id="ssl-widget"></div>

3. Initialize the Widget​

VanityCert.init({
  target: '#ssl-widget',
  apiEndpoint: '/api/vanitycert-proxy',
  serverId: 123,
  userId: 'user-' + currentUser.id
});

4. Create Backend Proxy​

The widget requires a backend proxy to securely call the VanityCert API.

See Backend Proxy for implementation examples.

How It Works​

Integration Methods​

Redirect to Portal (Easiest)​

Redirect users to VanityCert's white-label portal:

window.location.href = `https://app.vanitycert.com/portal/${orgToken}`;

Pros: Zero code, fully managed Cons: Redirects away from your site

Embed the widget directly on your site:

<div id="ssl-widget"></div>
<script>
  VanityCert.init({
    target: '#ssl-widget',
    apiEndpoint: '/api/vanitycert-proxy',
    serverId: 123,
    userId: currentUser.id
  });
</script>

Pros: Stays on your site, customizable Cons: Requires backend proxy

Custom Integration​

Build your own UI using the VanityCert API:

const response = await fetch('/api/vanitycert-proxy/domains', {
  method: 'POST',
  body: JSON.stringify({ url: domain, server_id: serverId })
});

Pros: Full control Cons: Most development effort

Use Cases​

SaaS Platform Custom Domains​

Let your customers add their own domains to your SaaS platform.

Example: Website builder, email marketing platform, CRM

Multi-Tenant Applications​

Provision SSL for customer-specific subdomains or domains.

Example: customer1.yourapp.com, customer2.yourapp.com

White-Label Solutions​

Embed SSL provisioning in your white-label product.

Example: Reselling your platform under customer brands

Next Steps​

📦 Installation

Install and configure the widget

View Guide →

⚙️ Configuration

Configure options and callbacks

View Options →

🔒 Backend Proxy

Secure API integration examples

View Examples →

🎨 Theming

Customize the widget appearance

View Guide →

Support​

Need help? Check out:

Or contact us at support@vanitycert.com