Prerequisite

Before integrating the YourCall Chatbot on your website, you will need the following:

Client ID (clientId)

This is a unique identifier provided by YourCall to identify your account.
Agent ID (agentId)

This is the identifier of the agent

You can retrieve your Client ID and Agent ID from your YourCall dashboard or by contacting your account manager.

Embedding of the chatbot

To embed the chatbot, add an <iframe> to your page with the following URL:

<iframe
  id="yourcall-chatbot"
  src="https://chat.yourcall.ai/?clientId=YOUR_CLIENT_ID&agentId=YOUR_AGENT_ID&locale=fr"
></iframe>

URL parameters

agentId: your Agent ID
clientId: your Client ID
locale: (Optional fallbacks to fr) available locales: fr, en, de, es, it, nl

Programmatic interaction (Optional)

To interact with the chatbot from your website you will need to add to the end of your <body> of your html

<script src="https://chat.yourcall.ai/lib.js" async defer></script>

Initializing the Chatbot API

Once the library is loaded, you can create an instance of YourCallChatbot:

const chatbot = new Yourcall("#yourcall-chatbot");

Alternatively, you can pass a direct reference to the iframe:

const iframe = document.getElementById("yourcall-chatbot");
const chatbot = new Yourcall(iframe);

Available methods

`sendMessage(message: string): void`

Sends a message to the chatbot as if the user typed it.

chatbot.sendMessage("Hello! How can I get support?");

`sendMetadata(metadata: Record<string, unknown>): void`

Sends additional metadata related to the customer, session, or any relevant context.

You can use this to pass information such as the user's plan, user ID, or any business-specific data.

chatbot.sendMetadata({
  plan: "pro",
  isLoggedIn: true,
  userId: "user-1234",
});

`setCustomerId(customerId: string): void`

⚠️ Deprecated

Previously used to associate a customer ID to the chat session.

You should now use sendMetadata() instead.

chatbot.setCustomerId("customer-42"); // Deprecated

`setHeadline(headline: string): void`

Sets or updates the chatbot’s headline message (the welcome message displayed at the top of the chat).

Important:

The headline can only be set before the user has sent any message.

Once the conversation has started, updating the headline will have no effect.

chatbot.setHeadline("Need help? Our team is available!");

`setQuickReplies(quickReplies: string[]): void`

Displays a list of quick reply buttons in the chat interface.

These buttons can help users reply faster by clicking instead of typing.

Setting them when quick replies are present will replace the previous.

chatbot.setQuickReplies(["Yes", "No", "Maybe later"]);

`toggleLogs(): void`

Enables or disables debug logs in the browser console.

Useful during integration or troubleshooting.

chatbot.toggleLogs();

`reset(): void`

Reset the current chat session.

chatbot.reset();

Interacting with the Chat from your Tool responses

Actions are special commands triggered by tools during a chat session that enhance the chatbot's capabilities by embedding interactive UI components into the conversation.

To implement these actions and UI elements, wrap your action data within a yourcall_actions object, which serves as the top-level container for all action integrations.

Example

{
...
	"yourcall_actions": {
		"button": {
			"link": "https://yourcall.ai",
			"text": "Access yourcall"
		},
		"quick_replies": [
			"Help me",
			"What's the weather like",
			"I want to cook some tomatoes"
		]
	},
...
}

Button action

The button action adds a clickable link to the chatbot that directs users to a specific URL. You must provide both a link and a text field.

The text field automatically translates to the user's current chat session language.

	"yourcall_actions": {
		"button": {
			"link": "https://yourcall.ai",
			"text": "Access yourcall"
		},
	},

Quick replies action

Quick replies can be specified in your tool response. The system will automatically translate each reply to the user's chat session language if needed.

	"yourcall_actions": {
		"quick_replies": [
			"How can I buy a ticket ?",
			"Where can I find the Eiffel tower ?",
			"When is the next metro ?"
		],
	},

Chatbot

On this page