FlutterFlow and Zendesk integration: Step-by-Step Guide 2024

   

• Create a Zendesk Account: If you don't already have a Zendesk account, you will need to sign up for one. Visit Zendesk and follow the instructions to create an account.
• Configure Your Zendesk Support Channels: Log in to your Zendesk account and configure the support channels you want to use, such as email, chat, or phone.

   

• Navigate to Admin Center: In your Zendesk dashboard, click on the top-right corner where your profile icon is, and select "Admin Center".
• API & Channels: Go to "Apps and integrations" and then click on "APIs".
• Enable Token Access: Make sure that "Token access" is enabled.
• Create a New Token: Click on "Add API token". Give your token a meaningful name and click "Create". Copy the generated token as you will need it for authentication.
• Save Your Credentials: Along with the token, you will need your Zendesk subdomain and email that will be used for requests.

   

• Create a FlutterFlow Project: Sign in to FlutterFlow and create or open your existing FlutterFlow project.
• Configure Dependencies: You'll need http or dio package for making API requests to Zendesk. Go to your FlutterFlow project's "Settings" and find "Dependencies". Add http or dio under dependencies.

   

• Configure API Calls:
  1. Navigate to the "API Calls" section in your FlutterFlow project settings.
  2. Click "Add API Call" to add a new API request.
  3. Provide a Name (e.g., SubmitTicket).
• Set the URL: For submitting a ticket, the URL structure would generally be: https://<your_subdomain>.zendesk.com/api/v2/requests.json. Replace <your_subdomain> with your Zendesk account subdomain.
• Set HTTP Headers: Configure the headers to include the Base64 encoded API token.

        
        {
          "Content-Type": "application/json",
          "Authorization": "Basic <Base64-encoded-credentials>"
        }
        
      

  Example using an email and API token (encoded to Base64): username/token:API\_TOKEN
• Define Parameters: Define the parameters required by the API. For creating a ticket, it will typically include:

        
        {
          "request": {
            "subject": "The subject of the ticket",
            "comment": {
              "body": "The body of the ticket"
            },
            "priority": "normal"
          }
        }
        
      

  Configure these under the “Request Body” settings, with dynamic values being populated from your FlutterFlow forms.

   

• Create a Form: Create a form in FlutterFlow with fields such as Subject, Body, and Priority.
• Add a Button: Add a button (e.g., "Submit Ticket") to trigger the API call.
• Bind Form Inputs: Bind the form input fields to the API parameters configured in the previous step.

   

• Set Up Button Actions:
  • Go to the properties of the Submit button.
  • Add an action for "OnTap" event.
  • Select "API call" and choose the "SubmitTicket" API you configured.
  • Map form fields to the corresponding API parameters.

   

• Run Your App: Run your FlutterFlow app and navigate to the form.
• Submit a Ticket: Fill in the form and click the submit button.
• Verify in Zendesk: Check your Zendesk dashboard to verify that the ticket has been created.

   

• Success Message: Configure success actions, such as navigating to a "Thank You" page or displaying a success message.
• Error Handling: Add error action steps to handle potential errors, such as displaying an error message or prompting the user to retry.

   

• User Feedback: Collect feedback from users about the ticket submission process and make necessary adjustments.
• Advanced Features: Consider integrating more advanced Zendesk features such as chat or other support functionalities to further enhance customer experience in your app.

   

By following these steps, you have successfully integrated FlutterFlow with Zendesk to enable in-app customer support. The steps involve configuring both Zendesk API settings and creating corresponding flows within FlutterFlow to make API calls, improving user interaction, and handling responses appropriately.