Integration guide

Add tailored DNS instructions to your product

Quick start

Add DNS instructions with a few lines of code in your web page:

<script src="https://js.dnsinstructions.com/v1/dns-instructions.js"></script>
<script>
  dnsInstructions.mount({
    publishableKey: "YOUR_PUBLISHABLE_KEY",
    containerElement: document.getElementById("dns-section"),
    records: [
      {
        name: "custom-domain.example.com.",
        type: "CNAME",
        content: "shared-server.example.com.",
      },
    ],
  })
</script>

Let's take a look at what the example above looks like:

Records

These DNS record types are supported:

For MX records specify the priority of the record like so:

{
  name: "mail.example.com",
  type: "MX",
  content: "mail-server.example.com",
  priority: 10
}

Theming

Instructions can be styled using plain CSS and available theming options: 

dnsInstructions.mount({
  // ... same params as above
  theme: {
    // The color of links
    linkColor: string,

    // Clarifications and hints are sub-text
    subTextColor: string,

    /*
      DNS values and variables are highlighted
      to distinguish them as dynamic/contextual
    */
    neutralHighlightColor: string,

    // The small copy-to-clipboard button
    copyButton: {
      color: string,
      hoverColor: string
    },

    /*
      The "Check record" and other buttons.
      Style hover, active, and disabled states
    */
    buttonClassName: string

    // Some errors grab attention with warning boxes
    warningBox: {
      backgroundColor: string,
      textColor: string
    },
  }
})

Security

If your app has a Content Security Policy, these are the directives needed to display DNS instructions: 

connect-src: api.dnsinstructions.com;
script-src: js.dnsinstructions.com;