/* --------------------------------------------- */
// Define the component options here
/* --------------------------------------------- */

const TRIGGER_ELEMENT_ID = 'snippet-ai-trigger'

const codeWordOptions = {
  _specSrc: "https://spec.speakeasy.com/dub/dub/dub-with-code-samples",
  toggleShortcut: "$mod+s",
  triggerElementId: TRIGGER_ELEMENT_ID,
  suggestions: [
    'How do I create a new link?',
    'How do I create a branded short link?',
    'How do I create generate a QR code?',
    'How do I create many links at once?',
  ],
  publishingToken: 'super-secret-token'
  // Note: codeLang is sniffed from the URL
}

/* --------------------------------------------- */

/* Bootstrapping code */
/* --------------------------------------------- */
const injectCodeWords = (options) => {
  // Figure out which language we're viewing
  const { pathname } = document.location
  let codeLang = null;
  let previousComponent = null;
  if (pathname.startsWith('/sdks/typescript')) {
    // TypeScript is different than the others
    codeLang = 'typescript'
    previousComponent = document.getElementById('install')
  }  else if (pathname.startsWith('/sdks/quickstart/typescript')) {
    codeLang = 'typescript'
    previousComponent = document.getElementById('1-prerequisites')
  } 
  else if (pathname.startsWith('/sdks/quickstart/go')) {
    codeLang = 'go'
    previousComponent = document.getElementById('1-prerequisites')
  } else if (pathname.startsWith('/sdks/quickstart/python')) {
    codeLang = 'python'
    previousComponent = document.getElementById('1-prerequisites')
  } else if (pathname.startsWith('/sdks/quickstart/php')) {
    codeLang = 'php'
    previousComponent = document.getElementById('1-prerequisites')
  }
  // There's also a Ruby SDK, but we don't support that yet in Snippet-AI

  // Filter out landing pages, unsupported languages, etc.
  if (!codeLang || !previousComponent) {
    return;
  }

  // Create Snippet-AI widget
  const codeWords = document.createElement('snippet-ai')
  Object.entries({ ...options, codeLang }).forEach(([key, value]) => {
    if (Array.isArray(value)) {
      value = JSON.stringify(value)
    }
    codeWords.setAttribute(key, value)
  })

  // Create the trigger button
  if (document.getElementById(TRIGGER_ELEMENT_ID)) {
    return
  }

  const triggerButton = document.createElement('button')
  triggerButton.innerText = 'Generate Example Code'
  triggerButton.id = TRIGGER_ELEMENT_ID
  triggerButton.className = "mx-auto max-w-fit border border-neutral-300 px-5 py-2 text-sm font-medium text-neutral-500 shadow-sm rounded-lg"

  // Attach to the dom just after the usage header
  previousComponent.insertAdjacentElement('beforebegin', codeWords)
  previousComponent.insertAdjacentElement('afterend', triggerButton)
}

const installWebComponent = async (options) => {
  const script = document.createElement('script')
  script.type = 'module'
  script.src = 'https://snippet-ai.speakeasy-cloud.com/assets/index.es.js'
  document.head.appendChild(script)
  script.addEventListener('load', async () => {
    // Initial load
    injectCodeWords(options)

    // Listen for changes to href, and reload as needed
    let oldHref = document.location.href
    const body = document.querySelector('body');
    const observer = new MutationObserver(() => {
      if (oldHref !== document.location.href) {
        oldHref = document.location.href
        injectCodeWords(options)
      }
    });
    observer.observe(body, { childList: true, subtree: true });
  })
}

installWebComponent(codeWordOptions)


Read the docs

See how it’s built

Integrate Dub's link management infrastructure with Shopify.

Dub + Shopify integration

Shopify

Dub Docs

Dub is the link management platform for modern marketing teams.

Getting Started with Dub - Documentation

Introduction

A quick overview of how Dub is structured.

Data model

Explore ideas and examples of what you can build with the Dub API

Dub API Examples - Build with the Dub API

Examples

Learn how to use Dub's analytics to track and analyze your link performance.

Analytics

Learn how to get started with Dub Conversions

Dub Conversions Quickstart

Quickstart

Integrate Dub with your favorite tools and services.

Dub Integrations: Connect Dub to tools and services

Overview

Learn how to set up Dub OAuth applications to authenticate users with OAuth 2.0.

Integrate with Dub

A guide on how to run Dub's codebase locally.

How to setup Dub for Local Development (6 steps)

Local Development

An end-to-end guide on how to self-host Dub – the open-source link management platform.

How to self-host Dub in 8 easy steps

Self-hosting Dub

Dub API Reference - Introduction

API Keys

What are Dub's API rate limits?

Rate limits

Learn how to paginate through resources in the API.

All endpoints that list resources support pagination.

Pagination

Troubleshoot problems with this comprehensive breakdown of all error codes.

Dub API returns machine readable error codes, human readable error messages and a link to the docs for more information

Errors

Create a new link for the authenticated workspace.

Create a new link with the Dub API - API Reference

Create a new link

Update a link for the authenticated workspace. If there's no change, returns it as it is.

Update a link with the Dub API - API Reference

Update a link

Upsert a link for the authenticated workspace by its URL. If a link with the same URL already exists, return it (or update it if there are any changes). Otherwise, a new link will be created.

Upsert a link with the Dub API - API Reference

Upsert a link

Delete a link for the authenticated workspace.

Delete a link with the Dub API - API Reference

Delete a link

Get link info with the Dub API - API Reference

Retrieve a link

Retrieve a paginated list of links for the authenticated workspace.

Get list of links with the Dub API - API Reference

Retrieve a list of links

Retrieve the number of links for the authenticated workspace. The provided query parameters allow filtering the returned links.

Get the links count with the Dub API - API Reference

Retrieve links count

Bulk create up to 100 links for the authenticated workspace.

Bulk create links with the Dub API - API Reference

Bulk create links

Bulk update up to 100 links with the same data for the authenticated workspace.

Bulk update links with the Dub API - API Reference

Bulk update links

Bulk delete up to 100 links for the authenticated workspace.

Bulk delete links with the Dub API - API Reference

Bulk delete links

Get a QR code with the Dub API - API Reference

Retrieve a QR code

Retrieve analytics for a link, a domain, or the authenticated workspace. The response type depends on the `event` and `type` query parameters.

Retrieve analytics for a link, a domain, or the authenticated workspace. - API Reference

Retrieve analytics

Retrieve a paginated list of events for the authenticated workspace.

Retrieve a list of events with the Dub API - API Reference

Retrieve a list of events

Track a lead with the Dub API - API Reference

Track a lead

Track a sale with the Dub API - API Reference

Track a sale

Retrieve a customer by ID for the authenticated workspace.

Retrieve a customer with the Dub API - API Reference

Retrieve a customer

Retrieve a list of customers for the authenticated workspace.

Retrieve a list of customers with the Dub API - API Reference

Retrieve a list of customers

Update a customer for the authenticated workspace.

Update a customer with the Dub API - API Reference

Update a customer

Delete a customer with the Dub API - API Reference

Delete a customer

Create a new tag for the authenticated workspace.

Create a new tag with the Dub API - API Reference

Create a new tag

Retrieve a list of tags for the authenticated workspace.

Get list of tags with the Dub API - API Reference

Retrieve a list of tags

Update a tag with the Dub API - API Reference

Update a tag

Create a domain for the authenticated workspace.

Create a domain for a workspace with the Dub API - API Reference

Create a domain

Update a domain for the authenticated workspace.

Update a domain with the Dub API - API Reference

Update a domain

Delete a domain from a workspace. It cannot be undone. This will also delete all the links associated with the domain.

Delete a domain from the workspace with the Dub API - API Reference

Delete a domain

Retrieve a list of domains associated with the authenticated workspace.

Get list of domains associated with the workspace with the Dub API - API Reference

Retrieve a list of domains

Retrieve a workspace for the authenticated user.

Get workspace info with the Dub API - API Reference

Retrieve a workspace

Update a workspace with the Dub API - API Reference

Update a workspace

Open-source client libraries for the Dub API

Learn more about the @dub/analytics script and how to install it.

Learn more about the different variants of the @dub/analytics script.

Script Variants

Shorten and manage your links directly from your terminal

API Reference

SDKs

Dashboard

Support

Help Center

Learn how to use Dub's links to track and analyze your marketing campaigns.

Learn how to associate links with users, campaigns, teams, and other entities within your system.

Organizing links

Learn how to perform bulk actions on links.

Bulk actions

Use webhooks to get real-time notifications on events happening across your Dub workspace.

List of available webhook events you can listen to along with their payload examples

Event types

Learn how to verify webhook requests to ensure they're coming from Dub.

Verify webhook requests

Learn how to track lead conversion events with Dub Conversions

How to track lead events with Dub Conversions

Learn how to track lead conversion events with Clerk and Dub

Clerk Lead Tracking – Dub Conversions

Clerk

Learn how to track lead conversion events with NextAuth.js and Dub

NextAuth.js Lead Tracking – Dub Conversions

NextAuth.js

Learn how to track lead conversion events with Supabase and Dub

Supabase Lead Tracking – Dub Conversions

Supabase

Learn how to track lead conversion events with Auth0 and Dub

Auth0 Lead Tracking – Dub Conversions

Auth0

Learn how to track lead conversion events with Appwrite and Dub

Appwrite Lead Tracking – Dub Conversions

Appwrite

Learn how to track sales conversion events with Dub Conversions

How to track sale events with Dub Conversions

Learn how to track a sale conversion event with Stripe

How to track sale conversions with Stripe and Dub Conversions

Stripe

Learn how to track a sale conversion event with Shopify

How to track sale conversions with Shopify and Dub Conversions

Integrate Dub's link management infrastructure with Zapier.

Dub + Zapier integration

Zapier

Integrate Dub's link management infrastructure with Make.com.

Dub + Make.com integration

Make.com

Integrate Dub's link management infrastructure with Stripe.

Dub + Stripe integration

Integrate Dub's link management infrastructure with Segment.

Dub + Segment integration

Segment

Integrate Dub's link management infrastructure with WordPress.

Dub + WordPress integration

WordPress

Integrate Dub's link management infrastructure with Raycast.

Dub + Raycast integration

Raycast

Integrate Dub's link management infrastructure with Slack.

Dub + Slack integration

Slack

Learn how to integrate Dub with TypeScript.

Next.js

Remix

Nuxt

Express

Flask

Django

Learn how to integrate Dub with Ruby on Rails.

Ruby on Rails

Sinatra

Laravel

How to add @dub/analytics to your React or Next.js site

React

How to add @dub/analytics to your website

Manual Installation

How to add @dub/analytics to your Webflow site

Webflow

How to add @dub/analytics to your WordPress site

How to add @dub/analytics to your Framer site

Getting Started

Concepts

Conversions

Integrations

Open source

Shopify

View on Dub

View on Shopify

Read the docs

Shopify + Dub Conversions

See how it’s built

Dub Shopify Integration

Getting Started

Concepts

Conversions

Integrations

Open source

View on Dub

View on Shopify

​Read the docs

Shopify + Dub Conversions

​See how it’s built

Dub Shopify Integration

Read the docs

See how it’s built