walterholohan / react-native-crisp-chat-sdk

React-Native bridge for Crisp Chat iOS and Android SDK's
MIT License
70 stars 26 forks source link

Missing website ID! (IOS) #114

Closed mickaelcornelli closed 3 months ago

mickaelcornelli commented 1 year ago

Hello everyone,

Context:

I'm using Crisp on a functional React application. Since the mobile application is linked to the React application, I wanted to reuse Crisp for chat support.

As I'm using Expo dev client, I followed the documentation to make the following changes:

{
  "expo": {
    "plugins": [
      [
        "expo-build-properties",
        {
          "ios": {
            "deploymentTarget": "13.0"
          }
        }
      ],
      [
        "react-native-crisp-chat-sdk",
        {
          "websiteId": "xxxxxxxxxxx"
        }
      ]
    ]
  }
}

Versions :

  "expo": "~47.0.12",
  "react-native": "0.70.8",
  "react-native-crisp-chat-sdk": "^0.13.3",

However, I can't get this library to work on either IOS or Android. Android doesn't pass the pre-build phase -> https://github.com/walterholohan/react-native-crisp-chat-sdk/issues/58#issuecomment-1536095897

As for IOS, I took the following example to which I added information via Redux:

import * as React from 'react';
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import CrispChat, {
  CrispSessionEventColors,
  pushSessionEvent,
  resetSession,
  setSessionSegment,
  setSessionString,
  setSessionBool,
  setSessionInt,
  setTokenId,
  setUserAvatar,
  setUserEmail,
  setUserNickname,
  setUserPhone,
} from 'react-native-crisp-chat-sdk';
import { connect } from "react-redux";

const Contact = (props) => {

  const [showChat, setShowChat] = React.useState<boolean>(false);

  const onShowChat = () => {
    setShowChat(!showChat);
  };

  return (
    <View style={styles.container}>
      <TouchableOpacity onPress={onShowChat}>
        <Text>{showChat ? 'Hide' : 'Show'} Chat</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={() => setTokenId(props.user.infos.uid)}>
        <Text>Set Token Id</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={() => setUserEmail(props.user.infos.email)}>
        <Text>Set User Email</Text>
      </TouchableOpacity>
      <TouchableOpacity
        onPress={() => setSessionString('stringkey', 'string value')}
      >
        <Text>Set Session String</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={() => setSessionBool('boolkey', true)}>
        <Text>Set Session Boolean</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={() => setSessionInt('intkey', 10)}>
        <Text>Set Session Int</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={() => setUserNickname(props.user.infos.firstname + props.user.infos.lastname)}>
        <Text>Set User Nickname</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={() => setUserPhone(props.user.infos.phone)}>
        <Text>Set User Phone</Text>
      </TouchableOpacity>
      <TouchableOpacity
        onPress={() =>
          setUserAvatar(
            'https://s.gravatar.com/avatar/5bc4980ee481a05395a6d9cb3d61379c?s=80'
          )
        }
      >
        <Text>Set User Avatar</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={() => setSessionSegment('app')}>
        <Text>Set Session Segment</Text>
      </TouchableOpacity>
      <TouchableOpacity
        onPress={() =>
          pushSessionEvent('Sign Up', CrispSessionEventColors.BLUE)
        }
      >
        <Text>Push Session Segment</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={() => resetSession()}>
        <Text>Reset Session</Text>
      </TouchableOpacity>
      {showChat && <CrispChat />}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

mapStateToProps = (store) => {
    return {
        user: store.user,
    };
};

export default connect(mapStateToProps)(Contact);

After clicking on 'open chat', I received an error message stating 'missing website ID: image

Do you have any tips for fixing this issue ?

baptistejamin commented 3 months ago

Hey there!

The setup has been simplified and there is now a JS configure method to set your Website_ID :)