/flutterflow-integrations

FlutterFlow and Smooch (now Zendesk Sunshine Conversations) integration: Step-by-Step Guide 2024

Learn how to seamlessly integrate FlutterFlow with Zendesk Sunshine Conversations (formerly Smooch) with our easy step-by-step guide. Get started quickly!

Book a free No-Code consultation

What is Smooch (now Zendesk Sunshine Conversations)?

Smooch (now Zendesk Sunshine Conversations) is a messaging platform designed for businesses to have efficient, streamlined conversations with their customers across various channels. The tool enables businesses to unify messages from different channels such as WhatsApp, Line, Facebook Messenger, and others into a common interface. Businesses can respond to their customers' inquiries, or build interactive message experiences using this platform.

Matt Graham, CEO of Rapid Developers

Book a call with an Expert

Starting a new venture? Need to upgrade your web or mobile app? RapidDev builds Bubble apps with your growth in mind.

Book a free No-Code consultation

How to integrate FlutterFlow with Smooch (now Zendesk Sunshine Conversations)?

 

Step-by-Step Guide on Integrating FlutterFlow with Smooch (Zendesk Sunshine Conversations)

 

Step 1: Initial Setup in Zendesk Sunshine Conversations

**Sign Up and Create a New App**
  • Sign up: If you don't already have an account, sign up on the Zendesk Sunshine Conversations website.
  • Login: Log in to your account.
  • Create a new app:
    • Navigate to the Dashboard.
    • Select Apps.
    • Click on the Add New App button.
    • Fill out the required information: App Name, Description, Icon, etc.
 

Step 2: Retrieve API Credentials

**Find and Store API Keys**
  • Navigate to API Keys:
    • From your Sunshine Conversations dashboard, click on the API Keys tab.
  • Generate API Key:
    • Click the Generate API Key button.
    • Store the key securely: You will need this later for the FlutterFlow integration.
 

Step 3: Configure Sunshine Conversations Webhooks

**Setting Up the Webhook**
  • Navigate to Webhooks:
    • In the Sunshine Conversations dashboard, go to the Webhooks section.
  • Create a Webhook:
    • Click on Add New Webhook.
    • Enter the URL where you’ll be receiving events (this will be specific to your backend setup).
    • Enable the events you wish to receive (e.g., message:create, conversation:create).
 

Step 4: Set Up a Backend to Manage Sunshine Conversations API

**Choose a Backend Service** Before proceeding with FlutterFlow, you’ll need a backend to manage the interaction with the Sunshine Conversations API. You can use Node.js, Django, Firebase Functions, etc.
  • Example with Node.js:
    • Install Express.js: npm install express body-parser axios
    • Create a new file (e.g., app.js) and initialize your Express app.
    • Set up route handlers for the webhook events.
    • Integrate Sunshine Conversations API with Axios or any HTTP client of your choice.
 

Step 5: Configure FlutterFlow to Communicate with the Backend

**Setting Up API Calls**
  • Open your FlutterFlow project.
  • Navigate to API Calls:
    • In the left sidebar, click on API Calls.
    • Configure a new API Call for each operation you intend to perform.
**Example API Call Configuration**
  • POST Message to Conversation:
    • Endpoint: Your backend URL (e.g., https://your-backend-url.com/post-message).
    • HTTP Method: POST.
    • Headers: Include your required headers (Content-Type: application/json, Authorization).
    • Body:
      • Conversation ID
      • Message text
 

Step 6: Design and Implement Chat UI in FlutterFlow

**Create Chat Screen**
  • Add a new screen:
    • From the left sidebar, click on New Screen.
    • Select a blank template or use a pre-designed chat template if available.
  • Design the UI:
    • Add a ListView or ListBuilder widget to display messages.
    • TextField for input message.
    • Button to send message.
 

Step 7: Connect UI to API Calls

**Implement User Interactions**
  • Send Message Button:
    • Set an onTap action for the button to trigger the API call you've configured.
    • Pass the required parameters (message text, conversation ID).
  • ListView to Display Messages:
    • Bind ListView to the message data:
      • Use Data Sources to bind the ListView to the messages fetched from your backend.
 

Step 8: Test the Integration

**Test the Flow**
  • Run your FlutterFlow app.
  • Start a conversation in the chat screen.
  • Ensure messages are sent and received correctly.
**Debug and Troubleshoot**
  • Check logs in your backend for incoming and outgoing requests.
  • Inspect errors in FlutterFlow and correct them.
 

Additional Tips

  • Security: Ensure all API calls and backend services are secured, using secure methods for storing API keys and managing tokens.
  • Scalability: Make sure your backend can handle a large number of requests if your app scales up.
  • Error Handling: Implement robust error handling both in your backend and on FlutterFlow.
By following these detailed steps, you should be able to effectively integrate FlutterFlow with Smooch (Zendesk Sunshine Conversations). This integration will allow seamless, in-app communication features, providing an enriched user experience.

FlutterFlow and Smooch (now Zendesk Sunshine Conversations) integration usecase

Scenario

A customer support company aims to enhance its client communication channels through a new mobile and web application. The company wants to provide real-time support and capture customer queries seamlessly. They use FlutterFlow to develop the custom app and web interface, where users can initiate a chat for support or submit a query form. To ensure all interactions are seamlessly managed, they integrate Zendesk Sunshine Conversations (formerly Smooch) for live chat and query management.

Solution: Integrating FlutterFlow with Zendesk Sunshine Conversations

Application and Web Landing Page Creation

  • The company uses FlutterFlow to design a user-friendly double interface: a mobile app and a web landing page.
  • The interface includes features for users to chat directly with support or fill out query forms.

Setting Up the Integration

  • Zendesk Sunshine Conversations' API integration is set up within FlutterFlow using their API key.
  • Workflows are configured in FlutterFlow to trigger when a user starts a chat session or submits a query form.

Real-time Chat Support

  • When a user initiates a chat session, FlutterFlow triggers a workflow.
  • The workflow sends the user's information and chat request to Zendesk Sunshine Conversations.
  • Sunshine Conversations routes the chat to available support agents, enabling real-time communication with the user.

Query Form Workflow

  • Upon submitting a query form, another workflow in FlutterFlow is activated.
  • The form data (e.g., name, email, query details) is sent to Sunshine Conversations using the configured API actions.
  • A new conversation thread is created in Zendesk Sunshine Conversations, alerting the support team to respond based on priority.

Unified Client Communication

  • All chat sessions and query forms are managed and tracked within Zendesk Sunshine Conversations.
  • Support agents can view and respond to all customer interactions in one place, ensuring a consistent and prompt support experience.

Benefits

Enhanced Efficiency:

  • Real-time chat and automated query form capture reduce wait times and improve response efficiency.

Centralized Communication:

  • All customer interactions are stored and managed in Sunshine Conversations, ensuring a single source of truth for support teams.

Personalized Customer Experience:

  • The integration allows for customized responses and follow-ups based on user queries and chat history.

Data Insights:

  • The support team can analyze interactions, response times, and customer satisfaction using Sunshine Conversations' analytics tools, providing valuable insights for continuous improvement.

Conclusion

By integrating FlutterFlow with Zendesk Sunshine Conversations, the customer support company streamlines its communication channels. This integration ensures efficient real-time support, seamless query management, and a unified customer experience, ultimately leading to higher customer satisfaction and better service quality.

Explore More Valuable No-Code Resources

No-Code Tools Reviews

Delve into comprehensive reviews of top no-code tools to find the perfect platform for your development needs. Explore expert insights, user feedback, and detailed comparisons to make informed decisions and accelerate your no-code project development.

Explore

WeWeb Tutorials

Discover our comprehensive WeWeb tutorial directory tailored for all skill levels. Unlock the potential of no-code development with our detailed guides, walkthroughs, and practical tips designed to elevate your WeWeb projects.

Explore

No-Code Tools Comparison

Discover the best no-code tools for your projects with our detailed comparisons and side-by-side reviews. Evaluate features, usability, and performance across leading platforms to choose the tool that fits your development needs and enhances your productivity.

Explore
Want to Enhance Your Business with Bubble?

Then all you have to do is schedule your free consultation. During our first discussion, we’ll sketch out a high-level plan, provide you with a timeline, and give you an estimate.

Book a free consultation

Cookie Consent

By clicking “Accept”, you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts. View our Privacy Policy for more information.

deny icon
Deny
allow icon
Accept
Cookie preferences