taello-react-native

React Native component for the Taello AI shopping assistant. Opens a fullscreen chat modal powered by the Taello widget.

Install

npm install taello-react-native react-native-webview

iOS — link the native WebView pod:

cd ios && pod install

Android — add internet permission to android/app/src/main/AndroidManifest.xml:

<uses-permission android:name="android.permission.INTERNET" />

Usage

import { useState } from 'react'
import { TouchableOpacity, Text } from 'react-native'
import { TaelloChat } from 'taello-react-native'

export default function ShopScreen() {
  const [chatOpen, setChatOpen] = useState(false)

  return (
    <>
      <TouchableOpacity onPress={() => setChatOpen(true)}>
        <Text>Ask AI</Text>
      </TouchableOpacity>

      <TaelloChat
        visible={chatOpen}
        onClose={() => setChatOpen(false)}
        apiKey="pk_live_YOUR_KEY"
        apiUrl="https://api.taello.ai/api"
        primaryColor="#F04438"
        storeName="My Store"
      />
    </>
  )
}

Props

type TaelloChatProps = {
  visible: boolean                            // required
  onClose: () => void                         // required
  apiKey: string                              // required
  apiUrl: string                              // required
  sdkUrl?: string                             // default: unpkg taello-core CDN
  primaryColor?: string                       // default: #F04438
  storeName?: string
  logoUrl?: string
  welcomeMessage?: string
  placeholder?: string
  onMessage?: (msg: TaelloChatMessage) => void
  style?: StyleProp<ViewStyle>
}

Listen to chat events

<TaelloChat
  visible={chatOpen}
  onClose={() => setChatOpen(false)}
  apiKey="pk_live_YOUR_KEY"
  apiUrl="https://api.taello.ai/api"
  onMessage={(msg) => {
    if (msg.type === 'cart-update') {
      setCartCount(msg.data.count)
    }
    if (msg.type === 'checkout') {
      setChatOpen(false)
      navigation.navigate('Checkout', { items: msg.data.items })
    }
  }}
/>

Event types

| msg.type | msg.data | When | |---|---|---| | chat-state | { open: boolean, mode: string } | Chat opened or closed | | cart-update | { count: number, items: [] } | Item added or removed | | checkout | { items: [] } | User tapped checkout |

Self-hosted SDK

By default the widget loads from the unpkg CDN. If you host the SDK yourself, pass the URL:

<TaelloChat
  sdkUrl="https://api.yourstore.com/sdk/sdk.iife.js"
  ...
/>

Getting your API key

1. Sign up at taello.ai
2. Create a store and upload your product catalog
3. Go to API Keys in the sidebar and copy your publishable key

Web / React

Use taello-react for React web apps.

License

MIT