Skip to main content

Deflect Zendesk Support Form Tickets with AI Answers

Integrate the kapa.ai Support Form Deflector into your Zendesk Guide Support Form to automatically suggest relevant answers before users submit tickets, helping reduce support volume and improve user experience.

See it in action

Check out our live example to see how the Support Form Deflector works in a real Zendesk environment.

Prerequisites​

Before adding the deflector to your support form, you'll need:

  1. A Kapa.ai account with access to the Support Form Deflector
  2. Admin access to your Zendesk Help Center

Installation Steps​

  1. Create Support Form Deflector Integration:

    • Visit the /Integrations tab on the kapa platform
    • Create a new Support Form Deflector integration
    • Enable your Zendesk domain in the format: https://yoursubdomain.zendesk.com
    • Copy your Integration ID - you'll need this for the script configuration

  2. Access Theme Editor:

    • Log into your Zendesk Admin Center
    • Navigate to Guide settings (under Channels)
    • Click "Customize design"
    • Select your theme and click "Edit code"

  3. Modify New Request Page:

    • In the theme editor, locate and open new_request_page.hbs
    • Find the <div id="main-content" class="form"> section
    • Add the Kapa script just before <div id="new-request-form"></div>

  4. Add Script:

    The Support Form Deflector requires a few key parameters to function properly:

    Required Parameters:

    • data-integration-id: Your Integration ID from step 1
    • data-project-color: Your brand's color in HEX format (e.g. "#FF0000")
    • data-main-input-query-selector: The CSS selector for your main ticket description field
    • data-extra-input-query-selectors: CSS selectors for additional fields like subject line
    • data-submit-element-query-selector: CSS selector for the form element
    • data-submit-element-event-type: How the form is submitted (usually "onSubmit")
    • data-anchor-element-query-selector: Where to anchor the deflector UI
    • data-anchor-element-position: Position relative to anchor (e.g. "afterend")

    For Zendesk's default form, add this script to your template:

    <script
      async
      src="https://widget.kapa.ai/kapa-support-form-deflector.bundle.js"
      data-integration-id="YOUR_INTEGRATION_ID"
      data-project-color="#YOUR_BRAND_COLOR"
      data-main-input-query-selector="textarea[name='request[description]']"
      data-extra-input-query-selectors="input[name='request[subject]']"
      data-submit-element-query-selector="button[type=submit]"
      data-submit-element-event-type="onClick"
      data-submit-button-query-selector="button[type=submit]"
      data-anchor-element-query-selector="textarea[name='request[description]']"
      data-anchor-element-position="afterend"
    ></script>
    Customizing Query Selectors, Behavior and Styling

    The CSS selectors shown above are for Zendesk's default form layout. If you've customized your form, you'll need to adjust the selectors to match your specific form elements. For example, if your description textarea has a different name or ID, update data-main-input-query-selector accordingly.

    For a complete list of configuration options and detailed explanations of each parameter, see our Behavior Configuration guide and the Styling Options guide.

  5. Style Customization (Optional):

    Add these opinionated styling parameters that work well with Zendesk's default theme:

    <script
      async
      src="https://widget.kapa.ai/kapa-support-form-deflector.bundle.js"
      data-integration-id="YOUR_INTEGRATION_ID"
      ...
      data-answer-box-padding-x="md"
      data-answer-box-padding-y="md"
      data-answer-box-background-color="transparent"
      data-answer-box-border="1px solid #DBE0E1"
      data-post-submit-info-text="If this didn't help, you can submit your ticket and our team will respond shortly."
    ></script>

  6. Save & Preview:

    • Click "Save" to store your changes
    • Preview the changes using Zendesk's preview functionality
    • Test the form by entering a sample ticket

  7. Publish:

    • Once satisfied with the preview, click "Publish changes"
    • The deflector will now be live on your support form
Kapa Support Form Deflector in Zendesk

Verification​

To verify the installation:

  1. Navigate to your help center's submit request page
  2. Enter a test subject and description
  3. The deflector should activate and show relevant answers before allowing submission
tip

Make sure to test with different types of queries to ensure the deflector is working as expected across various support scenarios.

Troubleshooting​

If the deflector isn't appearing:

  • Confirm your integration ID is correct
  • Check that your domain is enabled in Kapa's settings
  • Verify the script is properly placed in the template
  • Ensure the CSS selectors match your Zendesk form elements

Need help? Contact the Kapa team.