How to show suggested Articles or FAQs on Zen-desk using react-native-zendesk-chat

Question

I want to show suggested Articles based on FAQs on mobile using react-native-zendesk chat SDK. but I don't find there is any option that helps to achieve this.

Quick help will be highly appreciated

Thanks

Answer 1

this code snippet will help you.

import React, { useState, useEffect } from 'react';

import { View, Text, FlatList } from 'react-native';

const App = () => {
  const [suggestions, setSuggestions] = useState([]);

  useEffect(() => {
    const fetchSuggestions = async () => {
      try {
        const response = await fetch(
          'https://<subdomain>.zendesk.com/api/v2/help_center/articles/search.json?query=How to resolve issue&per_page=5'
        );
        const data = await response.json();
        setSuggestions(data.articles);
      } catch (error) {
        console.error(error);
      }
    };

    fetchSuggestions();
  }, []);

  return (
    <View>
      <FlatList
        data={suggestions}
        renderItem={({ item }) => (
          <View>
            <Text>{item.title}</Text>
          </View>
        )}
        keyExtractor={item => item.id.toString()}
      />
    </View>
  );
};

export default App;

Answer 2

Integrate Zendesk Chat SDK in your React Native app

1: first Install the Zendesk Chat SDK

npm install @zendesk/chat-client-sdk

2: Import the Chat module in your React Native component:

import Chat from '@zendesk/chat-client-sdk';

3: Initialize the Chat module with your Zendesk account details:

Chat.init({
  accountKey: 'YOUR_ACCOUNT_KEY',
});

4: Start the chat session:

Chat.startChat({
  departments: [1, 2, 3],
});

Complete Example

import React, { useState, useEffect } from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import Chat from '@zendesk/chat-client-sdk';

const App = () => {
  const [isChatStarted, setIsChatStarted] = useState(false);

  useEffect(() => {
    Chat.init({
      accountKey: 'YOUR_ACCOUNT_KEY',
    });
  }, []);

  const startChat = () => {
    Chat.startChat({
      departments: [1, 2, 3],
    });
    setIsChatStarted(true);
  };

  return (
    <View>
      {!isChatStarted && (
        <TouchableOpacity onPress={startChat}>
          <Text>Start Chat</Text>
        </TouchableOpacity>
      )}
    </View>
  );
};

export default App;

Hope so it will help you.