Skip to main content

Installation

Install the VanityCert widget using your preferred method.

Installation Methods​

NPM​

npm install @vanitycert/widget

Then import in your JavaScript:

import '@vanitycert/widget/vanitycert.css';
import VanityCert from '@vanitycert/widget';

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

CDN (jsDelivr)​

<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>

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

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

CDN (unpkg)​

<link rel="stylesheet" href="https://unpkg.com/@vanitycert/widget@1/vanitycert.min.css">
<script src="https://unpkg.com/@vanitycert/widget@1/vanitycert.min.js"></script>

Self-Hosted​

  1. Download the latest release from GitHub
  2. Extract files to your public directory
  3. Include in your HTML:
<link rel="stylesheet" href="/path/to/vanitycert.min.css">
<script src="/path/to/vanitycert.min.js"></script>

Basic Setup​

1. HTML Container​

Add a container element where the widget will render:

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

You can use any CSS selector (ID, class, or element).

2. Initialize Widget​

Initialize the widget after the DOM is loaded:

<script>
  // Wait for DOM ready
  document.addEventListener('DOMContentLoaded', function() {
    VanityCert.init({
      target: '#ssl-widget',
      apiEndpoint: '/api/vanitycert-proxy',
      serverId: 123,
      userId: currentUser.id
    });
  });
</script>

3. Backend Proxy​

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

See Backend Proxy for implementation examples in Node.js, PHP, and Python.

Complete Example​

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SSL Certificate Setup</title>

  <!-- VanityCert Widget CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@vanitycert/widget@1/vanitycert.min.css">
</head>
<body>
  <div class="container">
    <h1>Set Up Your Custom Domain</h1>

    <!-- Widget Container -->
    <div id="ssl-widget"></div>
  </div>

  <!-- VanityCert Widget JS -->
  <script src="https://cdn.jsdelivr.net/npm/@vanitycert/widget@1/vanitycert.min.js"></script>

  <script>
    // Initialize widget
    VanityCert.init({
      target: '#ssl-widget',
      apiEndpoint: '/api/vanitycert-proxy',
      serverId: 123,
      userId: 'user-' + getCurrentUserId(),

      // Optional: Custom theme
      theme: {
        primaryColor: '#10243f',
        secondaryColor: '#1867a0'
      },

      // Optional: Event callbacks
      callbacks: {
        onCertificateIssued: function(domain) {
          console.log('SSL ready for:', domain.url);
        }
      }
    });
  </script>
</body>
</html>

Framework Integration​

React​

import { useEffect, useRef } from 'react';
import '@vanitycert/widget/vanitycert.css';
import VanityCert from '@vanitycert/widget';

function SSLWidget({ userId, serverId }) {
  const containerRef = useRef(null);

  useEffect(() => {
    if (containerRef.current) {
      const widget = VanityCert.init({
        target: containerRef.current,
        apiEndpoint: '/api/vanitycert-proxy',
        serverId: serverId,
        userId: userId,
        callbacks: {
          onComplete: (domain) => {
            console.log('Setup complete:', domain);
          }
        }
      });

      // Cleanup on unmount
      return () => {
        VanityCert.destroy(containerRef.current);
      };
    }
  }, [userId, serverId]);

  return <div ref={containerRef} />;
}

export default SSLWidget;

Vue​

<template>
  <div ref="widgetContainer"></div>
</template>

<script>
import '@vanitycert/widget/vanitycert.css';
import VanityCert from '@vanitycert/widget';

export default {
  props: ['userId', 'serverId'],

  mounted() {
    this.widget = VanityCert.init({
      target: this.$refs.widgetContainer,
      apiEndpoint: '/api/vanitycert-proxy',
      serverId: this.serverId,
      userId: this.userId
    });
  },

  beforeUnmount() {
    if (this.widget) {
      VanityCert.destroy(this.$refs.widgetContainer);
    }
  }
}
</script>

Angular​

import { Component, OnInit, OnDestroy, ElementRef, ViewChild } from '@angular/core';
import VanityCert from '@vanitycert/widget';
import '@vanitycert/widget/vanitycert.css';

@Component({
  selector: 'app-ssl-widget',
  template: '<div #widgetContainer></div>'
})
export class SslWidgetComponent implements OnInit, OnDestroy {
  @ViewChild('widgetContainer', { static: true })
  widgetContainer!: ElementRef;

  private widget: any;

  ngOnInit() {
    this.widget = VanityCert.init({
      target: this.widgetContainer.nativeElement,
      apiEndpoint: '/api/vanitycert-proxy',
      serverId: 123,
      userId: this.getUserId()
    });
  }

  ngOnDestroy() {
    if (this.widget) {
      VanityCert.destroy(this.widgetContainer.nativeElement);
    }
  }

  private getUserId(): string {
    // Your logic to get current user ID
    return 'user-123';
  }
}

Browser Support​

The widget supports all modern browsers:

  • Chrome 60+
  • Firefox 55+
  • Safari 12+
  • Edge 79+
  • Opera 47+

Version Pinning​

<script src="https://cdn.jsdelivr.net/npm/@vanitycert/widget@latest/vanitycert.min.js"></script>

Major Version​

<script src="https://cdn.jsdelivr.net/npm/@vanitycert/widget@1/vanitycert.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@vanitycert/widget@1.0.0/vanitycert.min.js"></script>

Next Steps​