@freeday-ai/webchat-widget-native

@freeday-ai/webchat-widget-native

Freeday webchat widget for React Native

Install

pnpm add @freeday-ai/webchat-widget-native

Usage

Here's an example of how to display the webchat it within a modal:

import React from 'react';
import {StyleSheet, Button, View} from 'react-native';
import Modal from 'react-native-modal';
import ChatWidget from '@freeday-ai/webchat-widget-native';

export default function App() {
  const [isModalVisible, setModalVisible] = React.useState(false);

  return (
    <View style={{flex: 1, padding: 24}}>
      <Button title="Open chat" onPress={() => setModalVisible(true)} />

      <Modal
        isVisible={isModalVisible}
        onBackdropPress={() => setModalVisible(false)}
      >
        <View style={styles.modal}>
          <ChatWidget
            // Update this with your own token!
            token="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxx"
            title="Welcome to Freeday!"
            subtitle="Ask us anything in the chat window below 😊"
            theme="freeday_v2"
            primaryColor="#13c2c2"
            greeting="Hi there! How can I help you?"
            baseUrl="https://beta-webchat.freeday.chat"
          />
        </View>
      </Modal>
    </View>
  );
}

const styles = StyleSheet.create({
  modal: {
    flex: 1,
    borderRadius: 4,
    overflow: 'hidden',
  },
});