Add Intelligent Form to Zendesk Help Center

What is Zendesk

Zendesk is a customer service solution for handling support tickets.

Concepts

Learn how to deploy an Inkeep AI Intelligent Form on your Zendesk Help Center
Learn how to configure the Intelligent Form component to attempt to answer customer questions directly
Learn how to create a new ticket with the Intelligent Form data including prefilled fields like name, email, subject, priority, and additional details

Get an API key

Follow these steps to create an API key for your web integration.

Navigate to the theme code editor

Click the Zendesk Products in the top bar, then select Guide
Navigate to Guide Admin
Click Customize on the theme you want to edit
Click Edit code. Which will open theme code editor

Create a custom page

Click on Add
Click on Custom page
Specify a name for the custom page - support_form
Click on Add custom page
Add the code below to a new file (support_form.hbs):

support_form.hbs

<div class="container">
  <div class="category-container">
    <div class="category-content">
      <div
        id="main-content"
        style="display: flex; align-items: center; justify-content: center; height: calc(100vh - 16px);"
      >
        <div
          style="height: 480px; width: 100%"
          id="inkeep-intelligent-form"
        ></div>
      </div>
    </div>
  </div>
</div>

Initialize the component

Next add the following script tag at the end of the file to initialize the Intelligent Form component.

support_form.hbs

<script type="text/javascript" defer>
  const addInkeepWidget = async function () {
    try {
      const inkeepScript = document.createElement("script");
      inkeepScript.type = "module";
      inkeepScript.src =
        "https://cdn.jsdelivr.net/npm/@inkeep/cxkit-js@0.5/dist/embed.js";
      document.body.appendChild(inkeepScript);
 
      await new Promise((resolve, reject) => {
        inkeepScript.addEventListener("load", resolve);
        inkeepScript.addEventListener("error", reject);
      });
 
      if (!window?.Inkeep?.IntelligentForm) {
        throw new Error("Inkeep IntelligentForm failed to load");
      }
 
      const formContainer = document.getElementById("inkeep-intelligent-form");
      if (!formContainer) {
        throw new Error("Form container element not found");
      }
 
      // OPTIONAL: fetch user data to prefill the form
      let userData = null;
      try {
        const response = await fetch("/api/v2/users/me.json");
        if (response.ok) {
          userData = await response.json();
        }
      } catch (error) {
        console.error("Failed to fetch user data:", error);
      }
 
      // configure the IntelligentForm component
      const config = {
        baseSettings: {
          apiKey: "INKEEP_API_KEY",
          primaryBrandColor: "#26D6FF",
          organizationDisplayName: "Inkeep",
          // ...optional settings,
        },
        formSettings: {
          primary: {
            fields: [
              {
                label: "Name",
                name: "name",
                defaultValue: userData?.user?.name || "",
                inputType: "text",
                isRequired: true,
              },
              {
                label: "Email",
                name: "email",
                defaultValue: userData?.user?.email || "",
                inputType: "email",
                isRequired: true,
              },
              {
                label: "How can we help?",
                name: "additionalDetails",
                inputType: "textarea",
                placeholder:
                  "Please provide any additional details that may be helpful.",
              },
            ],
          },
          secondary: {
            description: {
              default:
                "To finish submitting your request, please confirm the details below.",
              confident:
                "We found an answer that might help. Please confirm your details to continue.",
            },
            fields: [
              {
                label: "Subject",
                name: "subject",
                inputType: "text",
                isRequired: true,
                shouldPrefillWithAI: true, // Automatically populate based on user's query
              },
              {
                label: "Priority",
                name: "priority",
                inputType: "select",
                isRequired: true,
                shouldPrefillWithAI: true, // Automatically populate based on query context
                items: [
                  { label: "High", value: "HIGH" },
                  { label: "Medium", value: "MEDIUM" },
                  { label: "Low", value: "LOW" },
                ],
              },
            ],
          },
          successView: {
            heading: "Thank you!",
            message: "We'll be in touch soon",
          },
          buttons: {
            submit: {
              label: "Submit",
              onSubmit: async ({ values, conversation }) => {
                try {
                  // Process form data with your backend system
                  // example endpoint: https://github.com/inkeep/intelligent-support-form/blob/main/app/api/create-ticket/route.ts
                  console.log("Form submitted:", values, conversation);
                  // Add actual form submission logic here
                } catch (error) {
                  console.error("Form submission failed:", error);
                  throw error; // Re-throw to be handled by form component
                }
              },
            },
          },
        },
      };
 
      Inkeep.IntelligentForm("#inkeep-intelligent-form", config);
    } catch (error) {
      console.error("Failed to initialize Inkeep widget:", error);
    }
  };
 
  addInkeepWidget(); // add the component
</script>

Click on the Publish button. Navigate to your new page to make sure the form renders correctly. You can find the url for the new page by clicking on the kebab menu next to the page name in the left sidebar and selecting Custom Page URL.

For a full list of customizations, check out the Intelligent Form documentation.

Handling form submissions to create Zendesk tickets

Please refer to the Zendesk Ticket Creation guide for more information on how to handle form submissions to create Zendesk tickets.