Package

If you are developing your mobile application using the React Native framework, our preferred solution is outlined below:

• Download our React Native package via npm:

  npm install rn-sestek-webchat --save

• Install the following packages for audio, file processing, etc. on the package:

  npm install react-native-audio-recorder-player@3.4.0

  npm i --save react-native-fetch-blob@0.10.8

• After the package installations, import them into your application:

  import { ChatModal, ChatModalRef } from'rn-sestek-webchat';

• You are ready to use it. Use it within your application as shown below:

<ChatModal
	modules={{ AudioRecorderPlayer:  AudioRecorderPlayer, RNFS:  RNFetchBlob }}
	ref={modalRef}
	url={`http://${Platform.OS !== "ios" ? "10.0.2.2" : "192.168.52.51"}:55020/chathub`}
	defaultConfiguration={{
		sendConversationStart:  true,
		tenant:  'TenantName',
		projectName:  'ProjectName',
		channel:  'Mobil',
		clientId:  "mobile-testing",
	}}
	customizeConfiguration={{
		headerColor:  '#7f81ae',
		headerText:  'Knovvu',
		bottomColor:  '#7f81ae',
		bottomInputText:  'Bottom input text..',
		//bottomVoiceIcon: "<Cmp />",
		//bottomSendIcon: "<Cmp />",
		incomingIcon: { 
			type:  'uri', 
			value:  'another_link' 
		},
		incomingText:  '',
		incomingTextColor:  'black',
		outgoingIcon: { 
			type:  'component', 
			value:  require('./images/knovvu_logo.png') 
		},
		outgoingText:  'Knovvu',
		outgoingTextColor:  '#7f81ae',
		messageColor:  '#FCFBF7',
		messageBoxColor:  '#7f81ae',
		bodyColorOrImage: { 
			type:  'color', 
			value:  '#7f81ae' 
		},
		firsIcon: { 
			type:  'component', 
			value:  require('./images/knovvu_logo.png') 
		},
		firstColor:  'white',
		firstSize:  70,
	}}
/>

• For necessary information, please get in touch with the Sestek team