Creating a ticket in Zendesk when requested

This guide will walk you through the process of integrating a Zendesk ticket submission feature into your chat widget. By following these steps, you will allow users to create support tickets directly from your chat interface, ensuring a seamless transition from live chat to support ticketing.

Table of contents:

1. Locate main message function

2. Implement Zendesk ticket submission

2.1 Identify the Breakpoint

2.2 Insert the Zendesk Integration Code

2.3 Replace Placeholder Values

2.4 Customize Error Handling (Optional)

Final Outcome

----------

UI & Customization Notes

What it looks like in Zendesk

Whats upcoming on this feature

Prerequisites

Before proceeding, make sure you have the following information available:

• Zendesk API Token – Learn how to generate an API token from Managing access to the Zendesk API – Zendesk Help
• Zendesk Admin Email – Example: admin@mywebsite.com
• Description Field ID – Find the field IDs from Get Assignee ID, Group ID, and Field ID – Zendesk Help
• Subject Field ID – Same as above
• Any Custom Field ID – Retrieve necessary field IDs from Zendesk’s documentation
• Full Widget Code – Ensure you have our Fabical Add-On to view the full-code. 

Step 1: Locate the Main Message Send Function

The first step is to identify the main function responsible for sending chat messages within your widget. The function should look similar to the code snippet below:

// Main Send Message Function
async function sendMessage(message, imageData = null) {
  if (message) {
    messages.push({ role: "user", content: message });
  }
  if (imageData) {
    messages.push({ role: "user", imageData });
  }
}

Step 2: Implement Zendesk Ticket Submission

Now, you need to insert a function that captures the chat transcript and submits it as a Zendesk support ticket. To do this, follow these steps:

2.1 Identify the Breakpoint

Find the main function declaration and use it as a breakpoint for inserting the new code:

// Main Send Message Function
async function sendMessage

2.2 Insert the Zendesk Integration Code

Place the following block of code above the sendMessage function to add the ticket submission feature:

transferBtn.addEventListener("click", async () => {
  const email = prompt("Please enter your email address for support:");
  if (!email) {
    alert("Email is required.");
    return;
  }
  
  const subject = prompt("Please enter the subject for your ticket:");
  if (!subject) {
    alert("Subject is required.");
    return;
  }
  
  // Compile chat transcript
  const transcript = messages.map(msg =>
    (msg.role === "user" ? "User: " : "Assistant: ") + (msg.content || "")
  ).join("\n");

  try {
    const authString = btoa("Your_Zendesk_Admin_Email/token:Zendesk_API");
    const response = await fetch("https://Zendesk_URL.zendesk.com/api/v2/tickets.json", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "Authorization": "Basic " + authString
      },
      body: JSON.stringify({
        ticket: {
          subject: subject,
          comment: { body: transcript },
          requester: { email: email, name: email },
          custom_fields: [
            { id: 454, value: transcript },
            { id: 454, value: subject }
          ]
        }
      })
    });
    
    if (response.ok) {
      alert("Your ticket has been submitted to our support team. We'll be in touch soon.");
    } else {
      alert("There was an error submitting your ticket. Please try again later.");
    }
  } catch (error) {
    console.error("Error submitting Zendesk ticket:", error);
    alert("There was an error submitting your ticket. Please try again later.");
  }
});

2.3 Replace Placeholder Values

Ensure you replace the placeholders with your actual values:

• Replace 'Your_Zendesk_Admin_Email' with your actual Zendesk admin email.
• Replace 'Zendesk_API' with your actual Zendesk API token.
• Modify Custom Fields: Update the custom_fields array with the correct field IDs and values that match your Zendesk setup.

2.4 Customize Error Handling (Optional)

You can modify the error messages or add detailed logging for debugging purposes:

if (response.ok) {
  alert("Your ticket has been submitted to our support team. We'll be in touch soon.");
} else {
  alert("There was an error submitting your ticket. Please try again later.");
}
} catch (error) {
  console.error("Error submitting Zendesk ticket:", error);
  alert("There was an error submitting your ticket. Please try again later.");
}

Final Outcome

Once you integrate the above code into your chat widget, the new feature will:

• Prompt users for their email address and ticket subject
• Gather the full chat transcript
• Submit the conversation to Zendesk as a support ticket
• Display a success or failure message based on the API response

UI & Customization Notes

• The UI for this feature is still in Beta, and improvements may be needed for responsiveness.
• As the chat widget and AI are open source, you can freely customize the functionality to match your needs.
• Consider adding loading indicators or animations to enhance user experience.

What it looks like on Zendesk:

Description Body:

The description body includes the whole chat transcript. This allows your team to help with as much context as you can:

User Information:

When the user clicks the request human assistance button or asks the AI for human assistance it will ask for their email and the ticket subject (and any other fields that you added in Step 2), it will appear on Zendesk on the right:

The above information is only with the email and subject fields. 

Want to improve this feature?

• Test your integration thoroughly to ensure the ticket submission works correctly.
• Monitor API logs in Zendesk for any failed requests.
• Improve UI/UX by adding user feedback elements such as a progress bar or status notifications.

If you have any concerns, issues, or questions while implementing this feature, don't hesitate to contact us.

Upcoming releases for this feature:

• Moving all custom request fields to the bubble widget instead of a browser alert:
• Viewing ticket status from the chat widget (We're working on this feature but may be released in a long time, stay tuned)