App Directory

React Native SDK reference

Use the React Native SDK settings and actions to customize the behavior of your bot.

Settings

For the React Native SDK, AdaEmbedView takes various props that you can use to customize the behavior of your chatbot.

cluster

cluster?: string;

Specifies the Kubernetes cluster to be used. Do not change this value unless directed by an Ada team member.

greeting

greeting?: string;

Use this prop to customize the greeting that new chatters see. This is useful for setting view-specific greetings across your app. The greeting should correspond to the ID of the Answer you would like to use, which you can find in the URL of the corresponding Answer in the dashboard.

Example

handle

handle: string;

The handle for your bot. This is a required field.

language

language?: string;

Takes in a language code to programatically set the bot language. You must first turn languages on in your Ada dashboard.

📘

Language codes use the ISO 639-1 language format.

metaFields

metaFields?: object;

Use metaFields to pass information about a chatter to Ada. This can be useful for tracking information about your customers, as well as personalizing their experience. For example, you may wish to track the phone_number and name for conversation attribution. (See Variables for more information.)

Once set, you can access this information:

  • in the email attachment from Handoff Form submissions
  • via the Meta variables modal in the Conversations page of your Ada dashboard
metaFields={{
  name: "Some name",
  age: 30
}}

To change these values after bot setup, use the setMetaFields action.

sensitiveMetaFields

sensitiveMetaFields?: object;

Use sensitiveMetaFields to pass sensitive meta information about a chatter to Ada. This works like metafields, but provides an added layer of security.

Once set, you can access this information:

  • in the email attachment from Handoff Form submissions
  • via the Meta variables modal in the Conversations page of your Ada dashboard
sensitiveMetaFields={{
  token: "your_jwt_token"
}}

To change these values after bot setup, use the setSensitiveMetaFields action.

thirdPartyCookiesEnabled (Android)

thirdPartyCookiesEnabled?: boolean;

Set the thirdPartyCookies prop to enable third-party cookies in AdaEmbedView. This feature is only available in Android. The default value is false.

zdChatterAuthCallback

zdChatterAuthCallback?(callback: (token: string) => void): void;

Use the zdChatterAuthCallback to request a JWT token from your API, then pass it to Ada. This creates shared trust between Ada and Zendesk, and in turn allows for verifiable chatter identity.

zdChatterAuthCallback={callback => {
  const token = getTokenFromAPI(); // Get a fresh JWT token from your API
  callback(token);
}}

endConversationCallback

endConversationCallback?(callback: (event?: { [key]: string | object }) => void): void;

Use endConversationCallback to specify a callback function to be called when a chatter ends a conversation. The callback will receive an event object containing conversation metadata.

endConversationCallback={(event) => {
  // perform action after conversation has been ended by the chatter
}}

Actions

Call actions directly from the AdaEmbedView ref. This allows you to modify Ada chat without using state/props to trigger a re-render of the entire subtree.

import AdaEmbedView from '@ada-support/react-native-sdk';
// ...

class MyComponent extends React.Component {
  render() {
    return <AdaEmbedView
            handle="ada-example"
            ref={ref => (this.adaEmbedView = ref)}/>;
  }
}

deleteHistory

Deletes the chatter used to fetch conversation logs for a chatter from storage. When a user opens a new chat window, a new chatter is generated.

this.adaEmbedView.deleteHistory();

reset

Creates a new chatter and refreshes the Chat window. reset can take an optional object allowing language, metaFields, and greeting to be changed for the new chatter.

this.adaEmbedView.reset();

// With options
this.adaEmbedView.reset({
  metaFields: {
    name: "Some name",
    age: 30
    }
});

setLanguage

setLanguage(languageCode: string)

Changes the language in chat programatically. Use this action, rather than the language setting, to change the chat language without clearing the chat history. Language codes must use a lowercase, two-letter code, in ISO 639-1 language format. For example, en, fr, ca, ar, and so on.

this.adaEmbedView.setLanguage(languageCode: "fr")

Before using setLanguage:

setMetaFields

Used to set metaFields for a chatter after instantiation. This is useful if you need to update user data after Ada chat has already launched.

this.adaEmbedView.setMetaFields({
  name: "Some name",
  age: 30
});

setSensitiveMetaFields

Used to set sensitiveMetaFields for a chatter after instantiation. This is useful if you need to update user data after Ada chat has already launched.

this.adaEmbedView.setSensitiveMetaFields({
  token: "your_jwt_token"
});

triggerAnswer

this.adaEmbedView.triggerAnswer()

Triggers an answer in chat. Include the Answer ID, which you can find in the URL of the corresponding Answer in the dashboard.

Example

this.adaEmbedView.triggerAnswer("627d28a9bd9ca9e5337b9763")

📘

The chat window must be opened at least once before this method can be used.