# Tutorials ## Welcome to the Caleida Tutorials Welcome to the tutorial section of Caleida! This comprehensive guide is designed to help you make the most out of Caleida Agents and their powerful functionalities. Whether you are a seasoned developer or just the CEO of your company, our step-by-step tutorials will provide you with the knowledge and tools needed to integrate and utilize Caleida Agents effectively. ### What You'll Learn #### Exploring Caleida Agents Dive into the core features of Caleida Agents. Learn how to create, configure, and manage agents to automate and streamline your workflows. Our detailed tutorials will cover everything from basic setup to advanced configurations, ensuring you have a thorough understanding of each function. #### Integration Made Easy Discover how to seamlessly integrate Caleida with your existing systems and applications. Our integration guides will walk you through various methods and best practices to ensure smooth and efficient connectivity. Whether you’re working with APIs, webhooks, or other integration tools, we’ve got you covered. #### Best Practices and Troubleshooting Get insights into best practices for using Caleida effectively. From security tips to performance optimization, our tutorials will help you get the most out of your Caleida experience. Additionally, find solutions to common issues and troubleshooting tips to keep your operations running smoothly. ### How to Use This Guide Each tutorial is designed to be self-contained, allowing you to focus on specific topics of interest. You can start from the beginning and work your way through the entire guide, or jump directly to sections that are most relevant to your needs. By the end of these tutorials, you will have a solid understanding of Caleida Agents and be well-equipped to leverage their capabilities to their fullest extent. Happy learning, and welcome to the world of Caleida! ## **Welcome to Caleida Tutorials** Discover what you can achieve with Caleida! Here you'll find essential guides to mastering our platform. From the basics to advanced features, we'll guide you with step-by-step instructions, video demonstrations, and practical tips from experts. Learn to enhance customer interactions and optimize your business strategy with our AI-driven solutions. We're here to accompany you and ensure your experience with Caleida is a resounding success. # Set Up Your Agent Step by Step. ## 1. Introduction Once you've registered on **Caleida**, it's time to create your first agent. Upon entering your username and password, you'll be able to access your agent panel, where all the agents you create from now on will be located. ## 2. Create Your First Agent The agent creation screen is designed to be as intuitive as possible. However, please note that all fields can be edited later.

## 3. Instruction Section Your AI agent is composed of three main sections: 1. **Instructions:** where you can define all the behavior and knowledge of your Agent. 2. **Integrations:** basic or advanced to deploy your Agent wherever you need it. 3. **Conversations:** to visualize in real-time the conversations of your Agent with your users and extract insights through Intelligent Analysis. In this tutorial, we will work on the first section, "Instructions."

## 4. Configuration of your Agent. ### **4.1. Basic Concepts.** **Caleida is aimed at businesses**, so the first step in the setup will be the description (using natural language) of your company: 1. **Company Name**. 2. **Company Description**: main purpose and highlights, key products or services, details about the company's size, location, and corporate culture. 3. **Contact Information**: phone number, email, social media, etc.

### 4.2. Agent Profile. One of the main sections of your agent configuration. First, you will need to define the initial messages with which your agent will start the conversation.

By default, the active profile will be the one you selected in [step 2](#id-2.-create-your-first-agent) of this tutorial. You can change the type of agent between:
1. **Sales Agent:** evaluates and responds to customer needs, offering appropriate product recommendations. Maintains effective communication and handles uncertainties, following a set of specific rules to represent the company properly. Its objective is to drive customers towards the sales funnel, collect valuable data to improve sales performance, and avoids providing false information, adjust its language to that of the customer, and direct inquiries outside its scope to the appropriate human contacts. 2. **Customer Service Agent:** provides precise and empathetic assistance, focusing on the clarity and relevance of information about the company and its products. Their task is to understand and respond to customer inquiries, adapting their communication to their specific needs. They must avoid providing incorrect information, always respecting privacy and ethical standards. It is crucial to escalate issues when necessary, maintaining customer information security and satisfaction. 3. **News Agent:** increases user engagement by allowing agent interactions to discuss the latest news with your user base. This dynamic feature not only fosters meaningful dialogue but also enhances the user experience, facilitating more effective discovery of news content. 4. **Customized:** This option is only recommended if you are accustomed to working with LLMs. Create your agent's system prompt from scratch and then define its objectives later on. The main objectives of your agent should be clear, direct, non-redundant, and free of spelling errors. Creating objectives for your agent involves establishing clear, measurable, and achievable goals that align with it. Below are some examples of objectives; you can use them or take some ideas to create your own for your company: * ***Accompany the customer** throughout their purchasing process, using the information about our products provided in the knowledge base.* * ***After engaging in a conversation,** always try to provide the customer with this \[insert link] so they can schedule a meeting.*

### 4.3. Knowledge Base. We will develop this section in a separate tutorial, ["Create Your Knowledge Base Step by Step."](/set-up-your-agent/create-your-knowledge-base-step-by-step.) ### 4.4. Agent Expression. The personality of your agent is defined by the written instruction itself and the values you'll find in this window. 1. Adjust the **Creativity** to make your agent more or less predictable in its responses. A more creative agent will be more original but may not strictly adhere to its knowledge base. 2. Adjust the **Thematic Control** so that your agent either maintains the established theme in the instruction and its own knowledge base, or is able to interweave with other themes. 3. Adjust the **Repetition** of agent responses so that it either reformulates responses to similar questions or always responds in the same way to similar questions. The combination of instructions, personality, and knowledge base of each agent are the keys to its success.

## 5. Test and readjust. It's **essential** that after configuring your agent, you conduct **as many tests as you deem necessary** by clicking on the top right button ***"Test Active Agent"***. **Don't forget to restart the chat after each configuration change.** Once your Agent behaves as you need it to, it will be ready to move on to its Basic or Advanced Integration so that your users can interact with it. # Create your Knowledge Base Step by Step. ## 1. Introduction. Your Knowledge Base is simply a centralized collection of all your information and processes: ***it's the knowledge your Agent needs to carry out the instructions you give it*** (for example, the guide for a traditional sales agent or the catalog of e-commerce). *Remember the scene of Neo learning Kung Fu as if it were a program? This would be the same, but replacing Kung Fu with the necessary knowledge to perform your main instruction.* It's extremely important to train your Agents with a **well-structured** and updated Knowledge Base to ensure safe, accurate, and relevant interactions. By following the best practices outlined in this guide, you can ensure that the format and structure of your Knowledge Base are optimized for use with generative AI, resulting in better experiences for customers and more efficient interactions. Explicit knowledge, such as manuals, guides, and reports, is ideal for training your agent. It's recommended to avoid repetition or implicit knowledge, as the agent will be more optimized with clear, concise, and descriptive information. ## 2. Prepare your Knowledge Base. ### 2.1. Accepted formats. **Your Knowledge Base is a text file without images**, but not all formats are suitable. Your Agent will work best if your Knowledge Base is in txt or docx (preferably), although it can also work with pdf.

It is recommended to avoid using presentations in '***pptx***' format to train your Agent. These types of documents often lack complete information and are estimated to contain only 30% of the valuable information we need for training. Therefore, it is preferable to focus on documents richer in text such as docx, pdf, or txt. ### 2.2. Best Practices 1. **Avoid Duplication**: do not repeat content. Each piece of information should only be present once to prevent redundancy and confusion. 2. **Categorized Documentation:** group documentation into specific categories or information silos. This will facilitate the AI system in locating and retrieving the required information efficiently. 3. **Image Recognition:** Keep in mind that AI does not recognize information contained in the images of the documentation. Therefore, important details regarding the images should always be included in the text. 4. **Be Specific**: Information should not be inferred but explicitly stated. The AI system relies on clarity to provide correct and relevant answers. Sales, website URLs, or presentations often have a lot of implicit content and context. 5. **Written Descriptions**: Any scheme, process, or flowchart should also be described in textual format. This is important because AI systems primarily process textual information. ## 3. Documentation Examples. ### 3.1. Process Description. To create an effective knowledge base, it is essential to provide explicit and detailed descriptions of processes. Processes are vital knowledge components in any project or organization. By writing down the steps of your flowcharts, you ensure that the AI system can understand and provide accurate responses based on your processes. **Wrong Option:**

**Correct Option:** *"All sellers on our team must follow these steps with all their prospective clients. The first step is to establish contact with the potential client and determine if they are qualified or not. If they are qualified and the potential client wishes to contract, we will proceed to organize the contracting requirements and close the deal. If the potential client does not wish to contract, a renegotiation option will be offered. If the potential client does not wish to renegotiate, it will be considered a Failed Contract."* ### 3.2. Frequently Asked Questions (FAQ). Most companies already have a Frequently Asked Questions (FAQ) page, and these are an excellent way to train your Knowledge Base. The more questions and answers, the better. Your Agent will be able to extract relevant information from the FAQ sections to provide answers to common queries and resolve customer issues. **Example**: *"How do I determine if a lead is valid?' To determine if a lead is valid, you must consider several factors such as the lead's relevance to your target market, the demonstrated interest in your product or service, their financial availability, decision-making time, and authority to make decisions. This involves analyzing if the lead fits within your market segment, has shown interest in what you offer, has the financial capacity to acquire your product or service, is ready to make a decision, and has the authority to do so. These considerations will help you choose the most promising and effective leads for your sales efforts."* ### 3.3. Internal Terminology. Every company or organization has its own internal terminology. This includes implicit meanings, internal acronyms, abbreviations, and contexts that someone external to your organization wouldn't understand. It's important that internal terminology be described in a dictionary-style format. We recommend that internal terminology be its own information silo. ### 3.4. Links and URLs You can use URLs by including them within your documentation to expand the information. To do it efficiently, you must include the complete URL. Hyperlinks won't work. These URLs, describing their context well, can be shared with your audience within the conversation. **Wrong option:** to schedule an appointment, provide the [link](https://calendly.com/pepelu_caleida/). **Correct option:** to schedule an appointment, provide the **link**: ### 3.5. Titles and Headings. Titles are important for delineating information silos. For example, if you have a section on the Sales Department, it's optimal to include a descriptive title indicating to the AI the context of the following information you will present. Since AI processes textual format better, titles and an explanation about them help categorize your documentation and make it easier for Agents to understand. **Wrong option:** *Sales Management Letter.* *To operate efficiently in sales within a company, it is necessary to build a strong sales management function.* *This is a critical role to ensure that the company is achieving Revenue Goals.* *This function will be led by the Director of Business Development.* **Valid option:** *"The "Sales Management Letter" refers to a set of guidelines and expectations established for the sales team in our company. Its aim is to operate efficiently and achieve the company's revenue goals. This important role is led by the Director of Business Development who oversees sales operations and ensures that sales targets are met".* ### 3.6. Indexes / Table of Contents Indexes are useful for organizing and summarizing the content of a document. However, AI may have difficulties with this type of information. AI may interpret indexes as duplicate content due to their similarity with the expanded content later in the text. This can cause issues in how they process and understand the content. To avoid this duplication, content should be presented in a direct and broken-down manner from the outset. This will facilitate understanding by the AI and prevent any interpretation issues. **Wrong option:** *"7 stages in the sales process.* 1. *Prospecting* 2. *Lead qualification* 3. *Sales call, demo, or meeting* 4. *Proposal* 5. *Negotiation* 6. *Contract signing* 7. *Post-purchase"* **Valid option**: *"The sales process consists of various strategic steps that guide the seller from identifying a prospect to converting them into a loyal customer. Below is a summary of the typical phases: Prospecting is the first step and focuses on locating and identifying potential customers or consumers for your products or services. Prospecting can be outbound, where the search is actively conducted on platforms such as LinkedIn or Google, or inbound, where contact is made with individuals who have already shown interest in what you offer. \[...]".* ### 3.7. Small Tables The best option for presenting information to the agent is by providing them with maximum context without summarizing to obtain detailed responses. **Valid option**: *"This table represents a summary of fruit sales in a fictional business over a specific period of time. The data includes the type of product (various fruits), the unit price of each fruit, the quantity of units sold for each product, and the total revenue generated by each product. This data could be useful for conducting sales analysis and making decisions regarding inventory management and pricing schemes".*

### 3.8. Large Tables When dealing with larger tables, the best option is to add a written instruction in the documentation specifying what the table contains. First, define what the table is for or what general information it contains. Second, describe the content of each column and if there is any correlation with the subsequent columns, be very descriptive. Finally, add the described table and conduct tests to ensure the result is correct. This way, the agent can understand these tables and fill in the information themselves, without needing to detail the table precisely. **Valid option:** *"The provided table shows the details of three different products sold: Apples, Pears, and Oranges. These details include the unit price, the number of units sold, and the total revenue generated by each product.* *Each row represents a different product, while each column offers specific details about each product.* *The first column, Product, lists the names of the products.* *The second column, Unit Price, provides the cost of a single unit of each product.* *The third column, Units Sold, shows the number of units that have been sold for each product.* *Finally, the fourth column, Total Revenue, shows the total amount of money generated from the product sales."* **The table will be added after the context.** ### 3.9. Other Best Practices 1. **Content Grouping:** Grouping similar content on the same page, instead of having it on different pages, avoids duplication and provides numerous benefits both for us using that documentation and for the Agent processing that information. 2. **Keep the Knowledge Base Updated:** Knowledge bases are not something that is created and then left aside. Your business, policies, products, and services are constantly evolving. Therefore, it is essential to keep your knowledge base updated to match these changes. This ensures that users obtain relevant and accurate information. 3. **Develop a Clear and Coherent Structure:** Each piece of information in the knowledge base must have its assigned place. The AI will be able to provide more accurate information if it can trace the exact source from where the information comes. Therefore, it is recommended to categorize the information into sections or silos. 4. **Ensure the Information is Well Written:** The information should be easy to read and understand. Eliminate technical or industry jargon unless it is absolutely necessary. Use simple and concise sentences and avoid long and convoluted phrases. 5. **Incorporate User Feedback:** Users often interact with your agent to obtain information. These interactions can lead to questions or issues you had not considered before. Observe the recurring questions or issues and update your knowledge base to include information related to these inquiries. It is important to remember that a good knowledge base is a work in progress. It won't be perfect the first time, but with diligence and attention to detail, you can develop an effective knowledge base that makes your agent a valuable resource for your users. ## 4. Upload Your Knowledge Base. 1. Access your **previously created** Agent. 2. Go to the **"Instructions"** section and select the instruction to which you want to upload the Knowledge Base. 3. On the configuration screen, click on [point 3](#id-3.-documentation-examples) (Knowledge Base). 4. In the Documentation section, click on **"Upload"** according to the type of document you want to use: * Products and/or services * Company information * FAQ * Additional documentation 5. Upload your Documentation in any of the following formats: TXT, DOCX, or PDF. 6. You can also scrape a webpage or add an RSS Feed.

# Connect your RSS or Newsletter How to connect you RSS or Newsletter. ## 1. Introduction. **Really Simple Syndication** (RSS) is a quick way to read the latest updates from websites that have an RSS feed. If your website offers an RSS Feed, you can link it to Caleida so that when a news article or a summary of an article is published, it is also sent to your Agent's Knowledge Base. This way, your Agent will always be dynamically updated. ## 2. Add RSS Feed. This tutorial assumes that you have already [Configured your Agent](/set-up-your-agent/set-up-your-agent-step-by-step.) and [Created your Knowledge Base](/set-up-your-agent/create-your-knowledge-base-step-by-step.), so you will be familiar with the Knowledge Base window (point 2 of the Instructions section). In it, select "RSS Feeds". Now, click on **"Add RSS Feed".**

In the next window enter: * **Name** of your RSS feed. * Public **URL** where your RSS feed is located. * **Update Frequency**: cadence with which you want your Knowledge Base to extract new data from your RSS.

Once you have entered the data, you will be able to enjoy an Agent with a Dynamic Knowledge Base to, for example: provide information in real time in your media, blog or online press; keep your audience updated in your **Telegram Channel**; etc. ## **Introduction** Really Simple Syndication (RSS) provides a quick way to read the latest updates from websites that offer an RSS feed. If your website offers an RSS Feed, you can integrate it with Caleida so that when a news article or article summary is published, it is also sent to your Agent's Knowledge Base. This ensures your Agent remains dynamically updated. **Adding an RSS Feed** This tutorial assumes you have already configured your Agent and created your Knowledge Base, making you familiar with the Knowledge Base window (point 2 of the Instructions section). Within it, select "RSS Feeds". Now, click on "Add RSS Feed". In the following window, enter: * **Name** of your RSS feed. * Public **URL** where your RSS feed is located. * **Update Frequency:** how often you want your Knowledge Base to fetch new data from your RSS feed. Once you have entered the details, you can enjoy an Agent with a dynamic Knowledge Base to, for example, provide real-time information on your website, blog, or online press; keep your audience updated on your **Telegram channel**; and more. # Writing Clear and Effective Instructions Caleida isn’t just another AI agent—it’s the smartest, most intuitive way to craft perfect instructions. Whether you're guiding users, automating tasks, or optimizing workflows, Caleida ensures clarit ### Best Practices for Writing Good Instructions #### 1. Keep It Simple and Clear * Use easy-to-understand words. * Be specific so there's no confusion. **Example Instruction:** > "Explain how to reset a password in three simple steps using plain language. Avoid technical jargon." #### 2. Organize Your Steps * Break tasks into small, step-by-step instructions. * Use bullet points or numbers to make them easy to follow. **Example Instruction:** > "List out the steps to book a hotel room online. Use numbers and short sentences for clarity." #### 3. Give Background Information * If needed, explain the situation or any limits. * Use examples to make things clearer. **Example Instruction:** > "Describe how to apply for a credit card, including eligibility requirements and required documents." #### 4. Explain the Goal * Say what you want the person or system to do. * Mention if they need to follow the steps exactly or if there’s room for flexibility. **Example Instruction:** > "Guide a new employee on setting up their company email. Mention any required approvals before they can proceed." #### 5. Use Direct and Clear Wording * Instead of “The task should be completed,” say “Complete the task.” * This makes instructions easier to understand and follow. **Example Instruction:** > "Tell the user to click 'Submit' after filling out the form instead of saying 'The form should be submitted.'" ### Personalizing Instructions with Caleida (Default & Custom Parameters) #### Default Parameters Caleida allows you to include user details in instructions for a personalized experience. These are the standard options: * **full\_name** – The user’s full name. * **first\_name** – The user’s first name. * **last\_name** – The user’s last name. * **og\_email** – The user’s email address. *In cases where the interaction with Caleida is not part of a campaign—such as a web plugin—the user information will be derived from the login details or if the interaction is based on a specific channel, such as Google Chat, the associated Google account will provide the user information. For interactions that are part of a campaign, the contact information will be responsible for providing these details.* #### Example: Greeting a User by Name Instruction: > "Caleida is your smart sales assistant. Greet users by saying, 'Hello ${first\_name}, how may I assist you today?'" #### Custom Parameters Caleida takes personalization further by allowing you to access **any** metadata from contacts using the `${}` approach. This means you can dynamically insert details such as user preferences, past interactions, or custom fields tailored to your workflow. Want to personalize product recommendations? No problem. Need to refer to a customer's last order? Easy. With Caleida, every interaction feels tailored and natural. ![example contact who is actively searching for a vehicle](https://2644172801-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FK2NBwdwy5L4sWk0DohX6%2Fuploads%2FA4bEIQg3nR8H8A7BpwBW%2FScreenshot_20250402_153536.png?alt=media\&token=2f9cb824-06d1-494d-9eda-0d083341f3d6) #### Example: Using Custom Details Say you’re in the automotive business, and you know a customer’s preference for fuel type and transmission. Caleida makes recommendations seamless: > "Looking for a new ride? Based on your preference for ${gear\_system\_preference} and ${fuel\_type}, we recommend these models." Or in a support scenario: > "Hi ${first\_name}, I see your last order was ${last\_purchase}. Would you like assistance with a related product?" #### Additional Examples of Instructions #### Example: Customer Support Bot > "When a user asks a question, respond politely and provide helpful information. If you don’t know the answer, offer to connect them with a support representative." #### Example: Email Personalization > "Write a friendly email introducing our new product. Use the user's name (${first\_name}) and mention their last purchase (${last\_purchase}). Keep it short and engaging." #### Example: Personalized Shopping Suggestions > "Recommend products based on the user’s shopping history. If they have previously purchased electronics, suggest related accessories. If they prefer fashion, highlight trending clothing items." #### Example: Travel Assistant > "Suggest destinations based on the user’s travel history and preferences. If they like beaches, recommend tropical locations. If they prefer adventure, suggest hiking spots." Caleida isn’t just AI—it’s your partner in seamless automation, intelligent interactions, and effortless personalization. Elevate every instruction, every workflow, and every user experience with Caleida. # Web How to integrate in your Web. ## Introduction Once you've finished instructing your AI Agent, it's time to deploy it using one of our Integrations. In this tutorial, we'll show you step-by-step how to integrate your AI Agent into a webpage and customize its appearance to your liking beforehand. Once integrated, it can be deployed as a chatbot or as a floating bubble in the bottom right, depending on your preference. ## 1. Preliminary Step: Customizing the Agent's Appearance Once integrated, you won't be able to make style changes unless you repeat the web integration process. Therefore, we recommend defining your AI Agent's style first. 1. In the Dashboard, go to the Integrations section and select the **Basic** option.

Here you can choose between different Basic Integrations: Web, Telegram, and WhatsApp. In this tutorial, we'll focus on the Web, but you can refer to different tutorials for integrating them into Telegram or WhatsApp. 2. Click on "**Edit Style**" in the top right corner of the Web channel.

Here you'll find various options to customize your Agent's appearance: logo, name, color codes, etc. You can adapt it to your Website's identity and preview it in the chatbox on the right.

Don't forget to click **"Save changes"** before exiting. ## 2. Configuration and Integration Finally, once the customization changes are saved, go back and click on "**Settings**".

Next, you will need to choose between Base Agente or Floating Bubble. * **Base Agent Code:** your Agent will be deployed as a chatbox. * **Floating Bubble Variant:** your Agent will be deployed as a bubble that expands and collapses a chatbox.

Important: If you haven't finished instructing your AI Agent, you won't be able to click on **"Integrate".** Copy the code displayed on the screen and paste it at the end of \ in your Website's code. With this, you've completed the Basic Integration on your Website. # WhatsApp How to integrate in WhatsApp. ## Introduction. Even though it might seem that Meta has made it difficult to integrate your Caleida AI Agent into your WhatsApp Business, don't worry: we bring you a detailed step-by-step tutorial to help you with your setup, along with all the necessary requirements to complete it. Still, **remember that we help you configure Caleida in your business if you subscribe to the annual AI Plus Agent plan or higher**. ### Steps. Throughout the tutorial, we will follow these steps: 1. Create a personal Facebook Account. 2. Create a business page. 1. Access Meta Business Suite. 3. Generate the Token. 1. Create a Business Portfolio. 2. Create an account on Meta for Developers. 1. Create an Application. 3. Add system users. 4. Assign assets. 5. Generate the token or identifier. 4. Obtain IDs. 1. Phone Number ID. 2. WhatsApp Business ID. 5. Obtain the key (Secret). 6. Webhook Endpoint and Verification Code. 7. Message Activation. 8. Enter your phone number for WhatsApp Business. 9. Add your Payment Method. 10. Verify your Business. 11. Customize your WhatsApp Business. ### Requirements. On the other hand, the requirements to complete the WhatsApp Business integration are as follows: 1. **Personal Facebook Account.** 2. **Business page.** 3. **Business Portfolio on Meta.** 4. **Permanent Token or Identifier.** 5. **A phone number dedicated to WhatsApp Business.** 6. **Phone and WhatsApp Business IDs.** 7. **Key (Secret).** 8. **Payment Method.** ### Important. This tutorial will help you from scratch if you do not have your personal Facebook account set up, so if you already have one, you can skip directly to **Step 2**. * If you already have an account on Meta Business Suite, you can skip directly to **Step 3**. * If you already have a business portfolio, you can skip directly to **Step 3.2**. * If you already have an account on Meta for Developers, you can skip **Step 3.2**. **Note:** due to the number of integration steps, we recommend that you follow the tutorial and verify that everything is correct. ## 1. Create a Personal Facebook Account. The first thing you need to integrate your AI Agent into WhatsApp Business is a personal Facebook account. If you don't have one, you can create it directly from the following [link](https://www.facebook.com/).

## 2. Create a Business Page. Next, we will **create a Facebook Business Page**. Go to the following [link](https://www.facebook.com/business/tools/facebook-pages?content_id=1rgvqYblbrFeou0\&ref=sem_smb\&utm_term=meta) and make sure you are logged in with your personal Facebook account. After this, you can click on **“Create a Page”**.

Fill out each of the required fields with your company's data. Once you are done, click on the **“Create Page”** button.

### 2.1 Access Meta Business Suite Once you have created your business page, you need to access the Meta Business Suite to manage your business assets. Go to the following [link](https://business.facebook.com/) to access your Meta Business Suite Dashboard. Make sure you are logged into your Facebook account, and click on **"Get Started"**.

## 3. Generate the Token The first necessary data to integrate our AI Agent into WhatsApp Business is the Token or Identifier. ### 3.1 Create a Business Portfolio To generate it, once inside Meta Business Suite, the first thing we need to do is create a Business Portfolio. Create one from the dropdown menu at the top left and fill in the fields.

Remember to select the previously created Business Page.

Once created, click on **"Settings"** in the left sidebar menu.

A new selection of sections will appear, where we should select **"Business Settings".** This will take us to a different page, which you can also access by [clicking here.](https://business.facebook.com/settings/) Once on this page, click on "**Apps**" within the Accounts section and create an application by clicking first on "**Add**" and then on **"Create an App ID."**

### 3.2 Create an Account on Meta for Developers When you click on **"Create an App ID,"** it will redirect you to Meta for Developers. If it doesn't, you can also access it by clicking on the following [link](https://developers.facebook.com/) and then on "**Log In**." If you are already logged into Facebook, it will likely log you in automatically. Otherwise, log in with your previously created personal account.

Now, we will complete the three simple registration steps: 1. **Accept the terms and conditions.** 2. **Enter a phone number and confirm via SMS.** 3. **Select our role.** #### 3.2.1 Create Application Next, click on **"Apps"** in the menu at the top and then on **"Create App."** Three options will appear. You should select the option "**Other**."

In the Application Type, select the option "**Company**."

Finally, you will need to fill in the following fields: 1. **Application Name** (we recommend naming it after your business). 2. **Your personal Facebook account email** (already pre-filled by default). 3. **Business Profile**: select the one we created earlier. Once you have filled out these fields, simply click on **"Create Application"**.

### 3.3 Add System User Once you have created your account on Meta for Developers and created the application, return to [Meta Business Suite](https://business.facebook.com/login/web/?next=https%3A%2F%2Fbusiness.facebook.com%2Fsettings%2F). In **Business Settings**, select **System Users** from the left sidebar menu, and then click **Add**.

Here we will name the user **"Caleida"** and assign them the role of administrator **(very important**).

### 3.4 Assign Assets With the user created, now click on **"Assign Assets"**. In the new menu that appears, click on **"Apps"** and select the application you created in Meta for Developers in step 3.2.1. Give it **Full Control** by enabling the option to **"Manage App"**. **Don't forget to save your changes.**

### 3.5 Generate the Token Once you have assigned the app as an asset, click on **"Generate a new identifier"**. Select the application that we created in Meta for Developers in **step 3.2.1**, named after our business. Next, choose **"Never"** for expiration and select **ONLY the last two permissions**: * **whatsapp\_business\_management** * **whatsapp\_business\_\_messaging**

Now click on "**Generate Identifier**".

Copy this Token (a set of numbers and letters in blue) and paste it into the **"WhatsApp Token"** field within **"WhatsApp Settings**" under Integrations > Basic in the Caleida Dashboard.

## 4. Get IDs To obtain the phone number ID and the WhatsApp Business ID, which are the second and third pieces of data needed for integration, we will return to [Meta for Developers](https://developers.facebook.com/apps/729289265996062/dashboard/) and select our app.

Once inside, click on "**Dashboard**" in the left sidebar menu, then scroll down to WhatsApp, and click on "**Set Up"** to proceed.

On the left-hand side, click on "**API Settings,**" then click **"Continue"** to proceed.

Here you will find a test number with its corresponding IDs. With this number, you can conduct necessary tests before launching your AI Agent to the public. (To test your agent, you'll need to add the phone number you want to test with, just below the phone number identifier, in the "**To**" section.)

Remember, this is a phone number provided by Facebook for testing your APIs. Later, we will show you how to replace it with your own, which will be used to handle your WhatsApp Business. ### 4.1 Phone Number ID Copy both identifiers, the numerical combination that appears to the right of **"Phone Number Identifier."**

Paste it into the WhatsApp configuration in Caleida in its corresponding section **("Phone Number Identifier").** ### 4.2 WhatsApp Business Account ID Copy both identifiers, the numerical combination that appears to the right of **"WhatsApp Business Account Identifier."**

Paste it into the WhatsApp configuration in Caleida in its corresponding section **("WhatsApp Business Account Identifier").**

## 5. Get the Access Key (Secret) To obtain the access key, return to [Meta for Developers](https://developers.facebook.com/apps/729289265996062/dashboard/) and navigate to **"Basic Information"** under **"App Settings"** on the left side of the screen.

Here, you simply need to copy the application's secret key. Click on **"Show"** to reveal the key, and then copy it.

Return to Caleida's Dashboard, and paste it into the **"Secret"** section within the WhatsApp configuration. Don't forget to save your changes.

## 6. Webhook Endpoint and Verification Code We're almost done. In this step, instead of copying and pasting data from Meta's apps to Caleida, we'll do it from Caleida to Meta. After saving the changes in the previous step, a window will open with the last two pieces of data needed to complete the integration: * **Webhook Endpoint** * **Verification Code**

First, we will copy the webhook endpoint and then navigate back to Meta for Developers. Go to the WhatsApp section in the left-hand menu and click on **"Settings."**

We will edit the webhook and paste the webhook endpoint key copied from Caleida into the "**Callback UR**L" section. Then, we will go back to Caleida's website, copy the verification code, and paste it into the "**Verification Code Identifier**" section.

We verify and save the changes. ## 7. Activate Messaging Finally, to activate messaging, click on "**Manage Webhook Fields"**, select the "**messages"** option, and then click "**Done"**.

Once you have saved the changes, test your agent as much as you need by chatting via WhatsApp with the test phone number from step 5, using the phone number you added in section **"A"** (it won't work if you use a different device). In the following steps, we'll show you how to replace it with the phone number that will be used for your WhatsApp Business, so your customers can start interacting with it and verifying your business. ## 8. Enter your WhatsApp Business phone number Once you have completed all the checks you deem necessary, you should add the phone number that will be associated with your WhatsApp Business. Go back to the section where the test phone number is located and replace it with your own. (Note: Pricing and limits apply based on conversations by Facebook. You can find more information [here](https://developers.facebook.com/docs/whatsapp/pricing/).)

Once you have added the phone number for your WhatsApp Business, you'll need to copy its corresponding IDs and replace the ones you pasted in Caleida's Dashboard configuration. Remember, the IDs previously linked in your WhatsApp Business settings in Caleida were for the test phone number. Now, we will replace them with the IDs for the real phone number. ## 9. Error handling (Agent no responding) At this stage, the agent should be responding to user messages sent via WhatsApp. If it fails to respond, regenerate the token by following steps 3.4 and 3.5. During this process, ensure that the token is linked with full control to the WhatsApp Account associated with the verified phone number:

## 10. Add payment method The agent already responds to messages sent by the user. To enable the agent to initiate conversations, it is necessary to add a payment method: In **API Settings** under WhatsApp configuration, proceed to **Step 6: Add Payment Method**. This step is necessary to add the phone number that will be associated with your WhatsApp Business.

Here, click on "**Payment Settings**," where you simply need to add your banking card details. ChatGPT ## 111. Verify your business (optional) Lastly, to verify your business, go to [Meta Business Suite](https://business.facebook.com/latest/home?asset_id=155078754364466\&business_id=374543221802986) and navigate to **Settings > Business Settings > Accounts > WhatsApp Accounts** and click on "**Start Verification"** or use the following [link](https://business.facebook.com/settings/security/?business_id=385042514193793). On this screen, simply initiate the verification process and fill out the fields with your business information. You may need to upload some documents.

## 12. Customize your WhatsApp Business This step is optional but highly recommended to take your Agent to the next level. First, access the following [link](http://business.facebook.com/wa/manage/phone-numbers). Once inside, click on the gear icon next to the phone number you selected for your business to configure it.

Navigate to the profile section where you'll find various fields to customize, such as profile picture, company description, contact details, etc.

And that concludes the tutorial for integrating Caleida with WhatsApp Business. Remember, if you have any questions, you can contact the Caleida team at . # Email Setting up your [Caleida](https://www.caleida.io/) AI Agent to work with [SendGrid](https://sendgrid.com/) might sound tough, but don't worry! This guide will make it super simple. Whether you're a tech expert or a newbie, you'll find this easy to follow. **Note: If you subscribe to the annual AI Plus Agent plan or higher, we can help you configure Caleida for your business. 🍀** #### What We’ll Do: 1. **Get the API key from SendGrid**: This is essential for connecting SendGrid with Caleida. 2. **Set up the Email Channel in Caleida**: This is the final step and it's really easy. ### Step 1: Get Your SendGrid API Key Here's how to get your API key from [SendGrid](https://sendgrid.com/): 💡 The basic Sendgrid API plan provides 100 credits, allowing for 100 emails per month.

1. **Log in** to your SendGrid account.
2. **Go to `Settings`** on the left-hand menu, then select `API Keys`.
3. **Click `Create API Key`.**
4. **Name your API Key.**
5. Choose the access level you need: * **Full Access (Recommended)** * **Restricted Access** * **Billing Access**
6. If you choose `Restricted Access` or `Billing Access`, set the permissions as needed. More details can be found [here](https://www.twilio.com/docs/sendgrid/ui/account-and-settings/api-keys#api-key-permissions).
7. **Click `Save`.**\

8. **Copy your API key** and keep it safe. **Don’t include it in your code or share it publicly.** That's it! Now you have your SendGrid API key ready to go. ### Step 2: Set Up the Email Channel in [Caleida](https://www.caleida.io/) Now, let’s set up your email channel in [Caleida](https://www.caleida.io/): 1. **Log in to your** [**Caleida**](https://www.caleida.io/) **account.**
2. **Select the AI Agent** you want to configure.
3. **Go to `Settings > Channels`**.\

4. **Click on the settings button**. A window will pop up where you'll enter the following information:\

\ \ Step 1:

* **SendGrid API Key**: Enter the key you received from SendGrid. * **Delay**: This determines how long the AI agent waits before responding. * **Sender Name**: This name will be used as the sender name for each email.\
**IMPORTANT**: *Once you fill in this information, click on save. After that, the domains will be available under the domain name drop-down. Choose the desired domain you want to set up with Caleida Agent.*\
Step 2: * **Domain Name**: Choose a verified domain associated with your API key. * **Sender Email**: Enter the email address for sending emails. **Make sure to set up email forwarding for this address to** [**reply\_to@parse.caleida.io**](mailto:reply_to@parse.caleida.io)**.**\
#### Email Forwarding *Note: if you have the email forwarding already set with* [*reply\_to@parse.caleida.io*](mailto:reply_to@parse.caleida.io) *then you can skip this step*\
To make things super simple we are going to discuss two of the most popular providers out there, Gmail and office365\
#### 1. Setup Email forwarding for Gmail \ Step 1: Open Gmail * Go to [Gmail](https://mail.google.com/) and log in to your account. \ Step 2: Go to `Settings` * Click on the gear icon in the upper-right corner of Gmail. * Select `"See all settings."`\

\ Step 3: Forwarding and `POP/IMAP` * Navigate to the `"Forwarding and POP/IMAP"` tab.

Step 4: Add a Forwarding Address * Click on `"Add a forwarding address."` * Enter the email address you want to forward your emails to. * Click `"Next"` and then "Proceed" to confirm.\

\ Step 5: Verify Forwarding Address * A verification email will be sent to the email address you provided. * Open the verification email and click on the confirmation link. \ Step 6: Confirm Forwarding Address in Gmail * Go back to the `"Forwarding and POP/IMAP"` tab in Gmail settings. * Click on `"Verify"` next to the email address you added. \ Step 7: Set Up Forwarding Options * In the `"Forwarding"` section, select `"Forward a copy of incoming mail to."` * Choose what to do with the original email in Gmail (keep, archive, or delete). \ Step 8: Save Changes * Scroll to the bottom of the page and click `"Save Changes."` 💫 #### #### **2. Setting Up Email Forwarding for Office 365** \ Step 1: Access Office 365 Settings * Open your Office 365 Outlook account. * Click on the gear icon in the top right corner. * Select **View all Outlook settings**.
\ Step 2: Add a Forwarding Address * In the settings pane, select **Mail**. * Under **Mail**, select **Forwarding**. * Select the checkbox to **Enable forwarding**. * Enter the email address you want to forward to. * Optionally, select the checkbox to **Keep a copy of forwarded messages**. * Click **Save**.

\ Step 3: Set Up Send Mail As * Open the Outlook Web App. * Click on the gear icon in the top right corner and select **View all Outlook settings**. * Select **Mail** and then **Compose and reply**. * Under the **Email signature** section, select **Manage email accounts**. * Click **Add account**. * Enter the email address you want to send from and follow the prompts to complete the setup.
\ Step 4: Configure SMTP Server * In the **Manage email accounts** section, add the email account you want to send from. * Enter the SMTP server details: * SMTP Server: `smtp.office365.com` * Port: `587` (TLS) or `465` (SSL) * Username: Your Office 365 email address * Password: Your Office 365 password or App Password (if Multi-Factor Authentication is enabled) \ Click **Next** and complete the setup.
\ Step 5: Verify and Save * A verification email will be sent to the forwarding address. * Go to the forwarding email account and find the confirmation email from Office 365. * Click on the confirmation link or enter the verification code in the Office 365 settings. * Now you can send emails from your Office 365 account using the forwarding address.
\ ***Please consult your email service provider's documentation or contact your vendor for assistance with other types of email services.***
\ Step 6: * **Disclaimer for AI Emails**: Toggle this if you don’t want to disclose that the emails are AI-generated.

Once all values are filled, click on the save button. Once the creation is successful, the modal will close and another dialog will open. From there, you can start the channel easily. Otherwise, you can start or stop the channel anytime with the switch provided on the Email channel card. # Telegram How to integrate in Telegram. ## **Introduction** Telegram Integration requires a mobile device with Telegram installed, as well as a registered user account. ## **1. Create a Telegram Bot** Before integrating your AI Agent into Telegram, you must create a Telegram bot to which we will associate your Agent. A quick and effective method to create it is: 1. In the top search bar of Telegram, type "@botfather". 2. Open a conversation with it and type "/help" to see all available commands. All these commands will help you customize your Agent on Telegram. 3. To create a new bot, type "/newbot" and follow the instructions to name it. 4. Once created, an **API Token** will be generated for your bot, which you must copy for use. ## **2. Enter your Token into Caleida** In the Caleida Dashboard, if you click on the Basics option within Integrations, you will access the Telegram Integration option. Use that Token in the dropdown window that will appear after clicking on "Settings", save it, and you will have your AI Agent integrated into Telegram. For any additional questions, please contact our **Support Team**. # Wordpress How to integrate in Wordpress. ## Introduction In this tutorial, we will guide you step-by-step on how to integrate your Caleida AI Agent into WordPress. Please note that for this integration, you must have a *Creator* account or higher in WordPress. ## 1. Installation To start, go to **Integrations>Advanced** in the Caleida Dashboard, look for the WordPress integration, and click **Configuration**. Here you will find all the necessary data for the integration. The first thing you need to do is download the compressed file of the plugin.

In your WordPress Administration Panel, go to **Plugins**, located at the bottom left of your screen.

Click the **Upload Plugin** button. Choose the compressed file previously downloaded from the Caleida Dashboard and click **Install Now**.

After installation, click **Activate Plugin**.

## 2. Accessing the Configuration Once activated, you will see a new item in the WordPress sidebar menu called **Caleida Settings**. Click on **Caleida Settings** to access the plugin configuration.

## **3. Agent Configuration** Next, you need to fill in the configuration fields. All this information is provided by Caleida. You can find it in the WordPress configuration section under **Integrations>Advanced** in the Caleida Dashboard. Simply copy each piece of information and paste it into the corresponding field.

* **Project ID**: Enter the Project ID of your Caleida Agent. * **Verification Token**: Enter the Verification Token associated with your Caleida Agent project. * **Enable Floating**: Check this box if you want the Agent to float on the page. * **Iframe Width**: Set the desired width for the Agent's iframe. * **Iframe Height**: Set the desired height for the Agent's iframe. * **Iframe Style**: Enter additional CSS styles for the iframe (optional). Once done, click the **Save Changes** button to save your configuration.

## **4. Embedding the Agent in Posts or Pages** To embed your AI Agent in posts or pages, use the shortcode \[caleida] in the posts or pages where you want to embed the Agent. Simply add a new shortcode block on the page where you want to embed it and write *\[caleida].* For more information about **shortcodes**, you can access the following [link](https://wordpress.com/support/wordpress-editor/blocks/shortcode-block/).

## **5. Verify the Agent Display** After adding the shortcode \[caleida] to your posts or pages, visit the corresponding pages on your website to verify the Agent's display. Make sure the Agent is embedded according to the settings you established in the plugin configuration.

## **6. Customize the Style (Optional)** If you want to further customize the appearance of the Agent, consider adjusting the **Iframe Style** settings. This setting allows you to apply additional CSS styles to the iframe, giving you the flexibility to match the Agent's appearance with your website's design. Experiment with different styles to achieve the desired visual impact. ## **7. Customize the Floating Agent (Optional)** If you opted to enable the **Enable Floating** option in the configuration, the Agent will appear in a floating position on your website. Customize the floating behavior by adjusting parameters such as position, height, and width in the **Floating Configuration** section of the settings. This feature provides a dynamic and attractive way for users to interact with the Agent. ### ## **8. Additional Tips** * To temporarily disable the Agent, you can comment out or remove the shortcode \[caleida] from specific posts or pages. * Regularly review user comments and interactions to adjust your Agent settings and improve the overall user experience. # Framer In this tutorial, we will show you how to integrate your AI Agent into Framer. **This integration is only available for the chatbox version of your Agent, not "Bubble".** 1. Access and log in to your Framer account, you can do it [here](https://www.notion.so/Framer-ed68d11771cc431b92b50e575c1dc9d4?pvs=21). 2. Once inside the Framer Dashboard, create a new project or click on an existing project. 3. Look for the **"Assets"** option in the left sidebar menu and click on **"Code".** 4. \*\*\*Create a new component and give it a name.

You will see a default code here. 5. Delete it and paste the one we provide you, you can access it from the Caleida Dashboard, under advanced integrations and within the Framer configuration. This code supports the style changes you make to your Agent, so you won't have to change it again every time you edit your Agent.

6. Once you've done this, you'll need to return to the main page by clicking on **"Home"** and then click on **"Assets"** again. 7. Now, in the **"Components"** section, a new one called "Caliope\_Agent\_desktop" should appear. 8. Drag it onto your page, Stack, or Frame, and you're all set.

# API How to use our API. Also you can check the status of the systems [here](https://status.caleida.io/) ## Accessing to more advanced documentation You can access [here](https://api.caleida.io/) to all the API documentation. ## 1. Get an API Key The first thing you need to do is to get an API Key. To do this go to **Advanced Integrations and** click on configuration in **API** in the Caleida Dasboard. Once here give it a name and copy it or write it down in a safe place. You will not be able to see this key again in full from the Caleida website.

## 2. Access Postman Through the following[ link](https://www.postman.com) you can access Postman. Create an account or login if you already have one. Once inside click on send an API request.

## 3. Authorize your API Under "Enter URL or paste text", click on "Authorization" and in the drop down menu select "API Key". Now we will fill in the fields: * **Key:** API Name (use the same one you gave in Caleida). * **Value:** Paste the API Key you copied from the Caleida website. * **Add to:** Make sure you add it to "Header".

## 4. Configure and send a request Once the API is authorized, we will configure the request. Make sure it is a "GET" request and enter the link [https://core.api.caleida.io/chats/records/{chat\_id}/](https://core.api.caleida.io/chats/records/%7Bchat_id%7D/) (where {chat\_id} represents the ID of the chat you wish to access). For example, if your chat ID is 12345, the URL would be ### 4.1 Get the Chat ID

Once you have pasted the URL click on "Send". # Shopify How to integrate in Shoppify. Now, we will teach you step by step how to integrate your AI Agent into your Shopify online store. **Please note that only the “Bubble” version of your Agent is available for this integration.** 1. The first thing you need to do is [Log In](https://www.shopify.com/es-es) to Shopify. If you don’t have an account, you can create one [here](https://www.shopify.com/es-es/prueba-gratis?term=shopify\&adid=589064299826\&campaignid=15439902932\&branded_enterprise=1\&BOID=brand\&utm_medium=cpc\&utm_source=google\&gad_source=1\&gclid=CjwKCAjwwr6wBhBcEiwAfMEQswOfqIRUxR5f19LV0DkJmESrW_aZBLGrzNPDspIgDfZTox1kw454AxoCUkoQAvD_BwE\&cmadid=516586848;cmadvertiserid=10730501;cmcampaignid=26990768;cmplacementid=324286430;cmcreativeid=163722649;cmsiteid=5500011) and get a 3-day free trial. 2. Once inside, go to the **“Online Store”** section on the sidebar and access **“Themes”** within it. 3. Once here, click on the icon with the 3 dots of the active theme, next to Customize, and then in **edit the code**.

4. Paste your Agent's code. 5. Once your Shopify store code is open, you can go to **“Sections”** and look for *header.liquid* or simply search for it in the search bar at the top left. 6. Now you just need to copy the Agent's code. You will find it in the Settings section of Shopify on the Caleida Dashboard, under Advanced Integrations. 7. Paste it at the end of the existing code and you're done. Before leaving, don't forget to click the Save button in the top right corner.

And we are ready! You now have everything you need to revolutionize your sales in your Shopify store.

# Slack How to integrate in Slack. ## Introduction In this tutorial we will show you how to integrate your Caleida AI Agent into a Slack Workspace. This integration is very easy and quick to do, it won't take you more than 5 minutes to do it. ## *Previous step* For this integration you need a Slack account and a workspace. If you have one you can easily create it from the following [link](https://slack.com/intl/es-es/). Make sure you are logged in before starting the process to speed up the process. ## 1. Choose your Agent As with all integrations, the first thing you must do is choose the Agent you want to integrate from the Caleida Dashboard control panel. If you don't have one yet or just want to integrate a new one for Slack you can consult our tutorial on [How to create and configure an Agent step by step.](/set-up-your-agent/set-up-your-agent-step-by-step.) ## 2. Integrate your AI Agent with Slack Once we already have the Agent chosen we will go to **Integrations > Advanced,** and here we will click on **Settings** in the Slack integration.

### 2.1 Add the Agent to Slack Once you have clicked on "**Add "**, it will appear in the Pop-Up. Here you must click on **Add to Slack.**. Clicking it will redirect you to a **Slack** window to grant permissions to the Agent.

#### 2.1.1 Grant Permissions to the Agent In this window you will simply need to grant permissions to the Agent in order to add it to your Workspace. Your privacy is important to us, so the permissions required are those strictly necessary for your Agent to function correctly in your **Slack Workspace**.

### 2.2 Verification To check that you have integrated your **Caleida AI Agent** correctly in your **Workspace** access it from Slack. In the left side menu, under **Applications**, a new application called **Caleida** should appear. By clicking on it you will be able to start interacting with your Agent.

And so much for the tutorial to integrate your Caleida AI Agent into your Slack Workspace. Remember that if you have any questions, you can contact the Caleida team via email . # Webhook How to integrate with Webhook. ## Introduction Webhooks provide a mechanism for receiving real-time notifications about specific events, such as chat creations, messages received, and analytics generated. by adding your desired URL and other required fields via the "+ Add Webhook" button, you can start receiving event notifications. the provided URL will be called every time the specified event occurs. ### *Required values to create a webhook:* 1. **URL**: The destination URL where you want to receive the event notifications. 2. **Webhook name**: A unique identifier for the webhook. 3. **Secret**: A robust secret key will be sent with the event call to verify the authenticity of the webhook call, ensuring it is always from `Caleida`. 4. **Events**: The specific events for which you want to receive notifications, such as chat creations, messages received, and analytics generated. ### *Supported events:* 1. **`chat`**: Triggered when a new chat is created. 2. **`message`**: Triggered when a new message is created. 3. **`insight.summary`**: Triggered when a summary insight is generated. 4. **`insight.topic`**: Triggered when a topic insight is generated. 5. **`insight.key`**: Triggered when a key insight is generated. 6. **`insight.conversation`**: Triggered when a conversation insight is generated. 7. **`insight.sentiment`**: Triggered when a sentiment insight is generated. ## Steps to add a webhook: 1. **Navigate to the webhooks section**: Go to the webhooks section (`integrations/webhook`) in the `Caleida` dashboard. 2. **Add webhook**: Click on the "+ Add Webhook" button. 3. **Enter the required information**: Fill in the required fields including the URL, webhook name, secret, and select the events you want to subscribe to. 4. **Save**: Click the add button to activate the webhook.

#### Edit or delete a webhook: By clicking on any list item in the webhook list, the edit modal will open. from there, you can edit or delete the webhook. #### Steps to edit a webhook: 1. **Open the edit modal**: Click on the desired webhook from the webhook list to open the edit modal. 2. **Modify webhook details**: Update the necessary fields such as the URL, webhook name, secret, or events. 3. **Save changes**: Click the save button to apply the changes.

#### Steps to delete a webhook: 1. **Open the edit modal**: Click on the desired webhook from the webhook list to open the edit modal. 2. **Delete the webhook**: Click the delete button to remove the webhook. 3. **Confirm deletion**: Confirm the deletion to ensure that the webhook is permanently removed. once deleted, no calls will be made to that URL.

#### Security considerations: * **Secret key**: Ensure the secret key is strong and securely stored. this key is crucial for verifying the authenticity of the event calls. * **HTTPS**: Use HTTPS for your webhook URL to ensure that data is transmitted securely. By following this guide, you can efficiently set up webhooks to receive real-time notifications for critical events, ensuring seamless integration and timely data processing. # Google Chat How to integrate in Google Chat ## Introduction In this tutorial, you will learn how to set up Google Chat as a communication channel for your AI agent using Caleida. This straightforward guide will walk you through the necessary steps to ensure seamless integration and real-time interactions within Google Chat. ### Video tutorial on how to integrate Caleida in Google Chat {% embed url="" %} ### Implement Google Chat as an AI Agent {% stepper %} {% step %} Navigate to the list of available channels in the Caleida dashboard

{% endstep %} {% step %} Select the Google Chat channel and access to the settings {% endstep %} {% step %} Enter your email domain (e.g., example@**yourdomain.com**) and save the changes. Only users with the specified domain can use the Google Chat App with the agent configuration.

{% endstep %} {% step %} Activate the Google Chat channel for your AI agent

{% endstep %} {% step %} Go to the Google Chat app and click on "New Chat."

{% endstep %} {% step %} Search for "Caleida S," click on it, and the conversation with the app will start.

{% endstep %} {% step %} ### Start chatting with your AI Agent!

{% endstep %} {% endstepper %} You can now enable or disable the integration with the entered domain. If you want to remove the integration, first make sure to stop the Google Chat channel. In the settings, you will see the "Delete" button. Clicking it will remove your configuration. # WhatsApp Campaigns How to set up Campaigns. ### Introduction. **Your AI Agent is the perfect host** for your Web, WhatsApp, Telegram... but what if you need to **send it to talk to your contacts**, instead of receiving them? **Start and Continue Conversations** with your WhatsApp contacts automatically with your **Agent IA Pro or higher**. Thanks to Caleida Campaigns, you will revolutionize your marketing and communication campaigns through Automated Conversations. You will be able, for example, to **reactivate your users with an intelligent conversation, not a message**. In this tutorial, we will show you **how to set up Caleida Campaigns** step by step. Remember that beforehand, you will need to have an **Agent AI configured** and integrated into **WhatsApp Business**. ### 1. Customizing Message Templates. In order for Campaigns to work properly, the first thing we need to do is to replace the ***hello\_world*** template set by default in our **Meta for Developers**. **Remember that this template will be the first message of your Agent, so you must edit it to your liking and measure .** To do so, you must follow the steps below: 1. First, go to [Meta for Developers](https://developers.facebook.com/?no_redirect=1). 2. Go to **WhatsApp > API Settings** in the side menu and once here, look for step two called "**Send messages with the API "** and click on the word "**here**", which appears on the right side to create a custom template.

3. In this page we will be able to observe all the templates that we have created, in this case only the default template ***hello\_world.*** is available. 4. When we have accessed, we will click on the blue button located at the top right called **"Create template".**

5. Then, you only have to choose the category and click on **"Continue".**

6. Once you have filled in all the data, you will be able to customize the template as you wish. 7. On the right side, you can preview how the message will look in WhatsApp. 8. Once created, you only have to click on the **"Send "** button and you will have your new WhatsApp message template configured.

### 2. Create the Campaign. Once the template is customized we are going to create the Campaign from the [Caleida Dashboard](http://www.caleida.io). 1. Choose the AI Agent you want to start the Campaign with and go to the **Campaigns** section in the left side menu. **Important:** if you do not have your Agent properly integrated in WhatsApp Business, you will not be able to access this section.

2. Click on "+ Campaign". 3. Fill in the different data needed to create your Campaign: a. Name of your Campaign. b. Description. Instruction. c. WhatsApp Business Template.

#### 2.2 Establish Campaign Objectives Well, **this point is very important**. Your Agent will use the Instruction you have chosen (same template and same Knowledge Base), but you must replace its Main Objectives. This is so, because we understand that the objectives may be different if the Agent has to receive someone and have a conversation than if the Agent has to initiate the conversation, as it is in this case. We recommend that you list the objectives in order of priority and be specific with each of them.

#### 2.3 Set Retry Messages (optional) You have the option to set up to three retry messages for those contacts who do not respond to the template conversation start message. One at 24h, one at 48h and one at 72h.

#### 2.4 Add a Test Contact. Your Test Contact will be the user to whom you will send your Campaign to test, just like the IA Agent, the results of your Instruction and Objectives definition. You will have to fill in: * Name. * Email: it is not necessary for the performance of the Campaign (it is through WhatsApp Business) but it can help you if your database is sorted according to this field. * Phone number. * **Notes:** this is the particular context of your contact and will be used by your Agent. For example, if it is a car purchase Campaign, in **'Notes'** we would put that the user got stuck in the middle of the purchase process of a Seat Ibiza.

### 3. Campaign Details. Once created, you will be able to edit the Campaign as many times as you want by clicking on **"Edit". Remember that once planned, you will not be able to make changes**.

This screen shows the general status of the Campaign, access to the Contacts Import, a series of basic control statistics and a list of contacts in the form of a table. We will explain the different columns present: * **Action:** action you want to perform relative to the contact. * **Chat:** the complete conversation that this contact has had with the Agent and an Intelligent Analysis of the conversation (you can also access from the Conversations section). * **Edit:** you will be able to change the particular data of the contact. * **Delete.** * **Name** * **Phone number** * **Retry:** times the Agent has tried to contact that contact (maximum 3). * **Status:** * **Draft:** the campaign is in draft status. * **Active:** no response has been received from the contact yet. * **Terminated:** the conversation is terminated because the objective of the campaign has been reached or not. * **Cancelled:** the campaign has been cancelled. * **No. Resps:** number of responses from the Agent. * **Objective:** reached or not reached. * **EndDate:** time when the Agent ended the conversation and its reason ("i" button). #### 3.1. Statistics, Conversations and Intelligent Analysis. As with your AI Agent, you will be able to access the **Chat History** and **Smart Analytics** of your Campaigns by accessing the corresponding sections and activating the Campaigns filters. On the other hand, in this screen you will have different interesting metrics to work with: * **Response Ratio:** number of contacts who have responded for every hundred conversations initiated. * **Total Contacts:** total contacts added to the campaign. * T**otal Responses:** sum of all Agent responses. * **Concluded:** contacts with whom the conversation has been concluded. * **Pending Responses:** contacts that have not yet responded.

#### 3.2 Test your Agent. To test your Agent, you must have added a Test Contact in Step 2.4. If you did not do it at the time, you can do it now by clicking on the purple button on the right side of the screen **"+ Add Test Contact "**. **Important:** remember that you will not be able to add this contact as a contact for the Campaign afterwards.

Once the test contact is added, the previous button will be replaced by a "Send test message" button, click it and start chatting with your Agent in the pop-up chat that will open.

Test your Agent before starting the Campaign. **Only you can determine the Instruction errors and Campaign Objectives**, so we recommend you spend some time performing as many tests as necessary until you get the result you want. **Note:** we recommend that you interact as a normal user would. Try to keep the conversation as real as possible according to your Campaign Objectives. If something doesn't fit and you want to modify the objectives, you can do it at any time by clicking on the **"Edit "** button next to the green "**Plan campaign "** button. #### 3.3 Importar los contactos desde un CSV o individualmente. Puedes tanto importar un archivo CSV con los datos de tus contactos haciendo click en **“Importar contactos”** como añadirlos manualmente uno a uno haciendo click en **“+ Agregar contactos”** donde los únicos requisitos obligatorios son añadir un nombre y un teléfono pero puedes añadir un correo y notas para poner el contexto al Agente.

In the case of a CSV Import, you must include the following columns: * **Name** (required) * **E-mail** (required) * **Phone** (required). * **Note:** the particular context of the contact, as we have seen before. * **custom\_\_\[property-name]:** you can add as many columns of custom fields as you need (age, license plate, marital status, etc). They will also feed the Agent with particular information. **Important:** it is mandatory to include 'NAME' and 'PHONE', otherwise the contact will not be imported. Remember that the note column is intended to include additional information about the contact. If your WhatsApp Template featured 'Placeholders' and you have defined them as 'Custom Fields' during your Campaign Setup, these will be included in your CSV and will be custom user properties that will be used by the Agent. **Download the template to check that everything is correct.** #### 3.4 Plan the Campaign. Once all the contacts are added, click on the green "Plan campaign" button on the right side of the screen and set the date and time for the start and end of the campaign (minimum one day duration of the campaign). **Important:** once the campaign is scheduled it cannot be modified.

### 4. Campaign Monitoring. Once your Campaign has been planned and started, you will be able to individually monitor each of your Agent's Conversations with your Contacts. To do this, click on **"Options "** on the contact you want to observe and a drop-down will open with three options. Control the Statistics, review your contacts and access the Smart Analytics; as well as activate the filters you want within the Control Panel to see in detail the results of your Campaign. So far this tutorial on how to set up Campaigns. Remember that if you have any questions, you can contact the Caleida team through the email . # Create an Alert How to create alerts. **Alerts** is a new feature of Caleida that allows you to configure custom rules to receive notifications whenever a user mentions a specific word, phrase, or topic. This enables you to monitor conversations in real time and offer much more proactive and effective support. In this tutorial, we'll show you how to set up this functionality. Before we begin, remember that you need to have a fully configured Agent for this. If not, you can follow our tutorial [Create and Configure Your Agent Step by Step](https://www.notion.so/Crea-y-Configura-tu-Agente-Paso-a-Paso-f88ad22fa2be42188a881971d52d0ac9?pvs=21). Once you have that set up, we can start with the tutorial. ### 1. Setting Up Rules Firstly, navigate to the **"Alerts"** section in the left-hand menu of your **Dashboard** and click on it. Here, you'll see all the active alerts you have because yes, you can have as many as you want. Next, let's create a rule. To do this, click on the purple button that says **“Trigger”.**

Once inside, you'll be able to see all your created rules, both active and inactive. To create a new one, click on **“+ Trigger”.**

Once we have accessed it, we can observe this section with fields to fill out: * **Rule Name** * **Rule Description** * **Trigger**: Reason why the alert is triggered. * **Activation Phrase**: Phrase the user needs to mention for the alert to be triggered. * **Email Notification**: Activate this option if you want to receive the alert via email as well.

Once you have created it, it will appear in the list of rules along with the others. In this list, you can see its name, whether it is active in **Campaigns**, the email to which alerts will be sent, the activation phrase, and its status. Additionally, you can also edit or delete it if you wish.

### 2. Alert Analysis Once you've created the **Rule**, on the Alerts page you'll see all the alerts you've received. Each alert includes a brief summary, the user's name, its status, the channel, and the date it occurred.

Additionally, if you have received many alerts, you can filter them by date, status, or name.

Clicking on an alert will show you more details about it. You can change its status, view a summary of the reason for the alert, and see the actual conversation between the Agent and the user.

If you still have questions, we recommend checking out this video: . That concludes the tutorial for setting up your Alerts. Remember, if you have any questions, you can contact the Caleida team at . # Create a Tool How to create Tools. Integrating external APIs into your Caleida AI Agent with the help of Tools can significantly enhance its capabilities. In this guide, we'll walk through a practical use case of integrating the Cats API, which provides information about random cat breeds. In this way it will be super easy to understand the configuration of a Tool **Note:** If you subscribe to the annual AI Plus Agent plan or higher, our team can assist you with configuring Caleida to suit your business needs. 🍀 #### Example Use Case: Cats API Integration **Objective:** Integrate the Cats API to enable your AI agent to fetch information about different cat breeds. This integration will allow users to request data about cat breeds, including descriptions, directly through the AI agent. #### What We’ll Cover: 1. **Tool Creation** 2. **Example Use Case** 3. **Testing the Integration** 4. Activating the Tool *** #### 1. Tool Creation **Step-by-Step Guide:** 1. **Navigate to the Tools Section:** * Select the **Tools** card on your dashboard’s sidebar.

2. **Create a New Tool:** * Click on the **Create New Tool** button.

3. **Configure the Tool:**

**Auth Toggle (Optional):** * **Purpose:** Decide if authentication is needed you can provide the auth key and the value. For the Cats API, authentication is not required. * **Name of the Tool (Required):** * **Purpose:** Name of he tool will help to distinguish between multiple tools on the list so make sure to add a meaning full name eg: "cats\_api" for easy identification. * **Request Method (Required):** * **Purpose:** This will be a method (Currently we support GET, POST) of request that the tool is going to use in this example\*\*,\*\* Select **GET** as the method for retrieving data. * **Endpoint (Required):** * **Purpose:** This will be the API endpoint that the tool is going to interact with, In this example, Enter the Cats API endpoint URL: `https://api.thecatapi.com/v1/breeds`. * **Description (Required):** * **Purpose:** Describe the tool’s function, e.g., "Fetches information about various cat breeds" * **Add Parameters (Based on type currently supporting `STRING, BOOLEAN, INTEGER, and FLOAT`):** * **Purpose:** Add any required parameters. For example: * **Name:** `limit` * **Description:** Limits the number of breeds returned. * **Default Value:** `5` * **Required Toggle:** Optional, depending on your needs. * **Save Button:** * **Purpose:** Click "Save" to save the tool configuration. #### 2. Example Use Case **Scenario:** A user wants to know about a random cat breed. **Request:** The AI agent uses the Cats API tool to make a GET request to the endpoint `https://api.thecatapi.com/v1/breeds` with the parameter `limit=5`. **Expected Response:** The API returns a list of cat breeds with details including breed names. **Example Response:** ```json [ { "id": "beng", "name": "Bengal", "description": "The Bengal cat is a domestic cat breed created from hybrids of domestic cats and the Asian leopard cat.", "image": { "url": "" } }, { "id": "siam", "name": "Siamese", "description": "The Siamese cat is a breed of domestic cat that originated in Thailand.", "image": { "url": "" } } ] ``` #### 3. Testing the Integration *** After completing the setup and saving your tool, a "Test Tool" button will appear in the footer of the drawer. Clicking this button opens a testing block specifically designed for the tool you’ve just created. This feature allows you to verify the integrity and functionality of the tool before activating it for use with your AI agent.\

**Steps to Test the Tool:** 1. **Locate the Test Tool Button:** * After saving the tool, scroll to the footer of the drawer where you will find the **Test Tool** button. 2. **Click the Test Tool Button:** * Clicking this button will open the testing block, providing an interface to interact with the tool and verify its behavior. 3. **Interact with the Testing Block:** * The testing block allows you to input test parameters and make requests to the tool’s API endpoint. This interaction helps ensure that the tool operates as expected and returns the correct data. 4. **Review Test Results:**\

* Examine the responses returned by the tool in the testing block. Check for accuracy, completeness, and any potential issues. If the tool does not perform as intended, review your configuration settings and make necessary adjustments. 1. **Adjust Configuration if Needed:** * If any discrepancies or issues are found during testing, modify the tool’s configuration settings accordingly. Save any changes and re-test the tool to ensure that the adjustments have resolved the issues. 2. **Confirm Integrity:** * Once the tool has passed testing and returned the expected results consistently, you can confidently activate it. This step ensures that the tool is fully operational and integrated correctly into your AI agent. By following these steps, you ensure that your tool functions correctly and integrates seamlessly with your AI agent, providing a reliable and effective addition to your Caleida platform setup. #### 4. Activating and Testing the Tool *** Once you are confident that the tool is set up correctly, you can activate it from the Tools list. Simply click the switch next to the tool's name to enable it.

After activation, the tool is ready for testing with the agent. To perform a test: 1. **Navigate to the Dashboard Navbar:** * Locate and click on the **Test Agent** button. 2. **Conduct Your Test:**\ ![](https://2644172801-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FK2NBwdwy5L4sWk0DohX6%2Fuploads%2F6wjRlSpkKW2Jxg6YXqPV%2Fimage%20$7$.png?alt=media\&token=fb55278a-a809-4a76-921d-e38bab220170) * Input a query related to the tool’s functionality. For example, you might ask, "Give me information about a random cat breed."

By following these steps, you can verify that the tool performs as expected and integrates smoothly with your AI agent. This final test ensures that everything is functioning correctly before full deployment. That concludes the tutorial for setting up your Tools. Remember, if you have any questions, you can contact the Caleida team at . # Web Widgets Documentation How to create Widgets ### Introduction **Widgets** enhance the chat experience by allowing users to interact with rich, visual elements such as charts, forms, or interactive cards directly within the conversation. This is especially useful in cases where plain text isn't enough to convey complex information or guide a user through a task. By integrating visual and interactive components, widgets improve usability and streamline workflows, making it easier for users to understand, explore, and act on information without leaving the chat. One use case would be displaying a personalized calendar to check someone's availability and quickly and easily book an appointment or meeting. There are two types of widgets: * **Default:** These are already configured to render specific information with easy implementation. * **Advanced:** These allow you to configure a widget from scratch for a specific need, giving you full control. The key difference between predefined widgets and advanced widgets lies in how they're created. Predefined widgets come with built-in basic functionality, often requiring little to no additional setup. In contrast, advanced widgets offer complete flexibility, allowing you to define their functionality entirely based on how you configure them. *** ### How does the LLM interact with widgets? Widgets are designed to be dynamically rendered based on the information provided by the LLM. The LLM is always aware of which widgets are available and when to invoke them. The process is the following: 1. A widget is created with the necessary information to be rendered. This information may include data provided by the LLM if needed, specifically within the `config` and `parameters` sections. 2. The LLM adds the widget’s identifier (as defined in its file) to the context and uses the widget's description to determine when it should be invoked for rendering. 3. Once the widget is triggered, it will be displayed—either using additional data supplied by the LLM if required, or simply with its predefined configuration if no extra information is needed. 4. When required, the LLM uses available [Tools](/tools/create-a-tool) to gather and provide data to the widget. For example, it may call an API endpoint and use the response to dynamically populate the widget with relevant information. > **Note:** This process is only possible if the web plugin is available.

*** ### How to setup each default widget In this section, we will explore what each default widget does, how to configure it, and how it interacts with the agent. Each default widget is designed to address a specific need in a general way, with easy configuration.

Calendly

This widget allows you to display a Calendly calendar to book meetings or appointments based on the Calendly profile link attached to the widget. The fields that need to be configured are: * URL: This sets the link to the Calendly calendar that will be displayed. For example: * Description: Describe to the agent when this widget will be displayed in the chat. Sequence process: 1. A widget will be created with description and configuration fields, which will include a URL. 2. The LLM will retrieve this information and call the widget when needed, based on the provided description. 3. The widget will be rendered via the URL in the configuration, but only if a web plugin is available. The widget does not function on WhatsApp The LLM will retrieve the URL inserted through `companion.widgetConfig?.url`

Maps

This widget allows displaying a location on an interactive map (previously configured in the LLM instruction prompt) when the location is requested in the chat. No fields is required, it is created directly. Sequence process: 1. The widget will be created with a parameter that initially has no value, which will later interact with a URL. 2. The LLM will contain the URL information to be displayed and will call the widget as needed. This URL has to be the following structure: `https://www.google.com/maps?q=LAT,LONG&z=15&output=embed` and change the Latitude and Longitude. *Prompt Example: Use this URL:* [*https://www.google.com/maps?q=37.3770029,-5.989754\&z=15\&output=embed*](https://www.google.com/maps?q=37.3770029,-5.989754\&z=15\&output=embed) *when asking about the location of Plaza de España in Seville.* 3. Once the widget is called, it will render the widget with the map by embedding the URL as the value of the configured parameter, but only if a web plugin is available. The widget does not function on WhatsApp. The LLM will call the widget, embedding the value in the parameter through: `companion.widgetProps?.map_url`

Image Gallery

This widget displays an image carousel that has been previously configured in the LLM prompt, which will insert it into the widget. \ \ There are no required fields, the widget will be created directly. Sequence process: 1. A widget is initialized with a parameter that is initially empty. 2. The LLM generates a comma-separated list of image URLs based on a tool response when its called and passes this list to the widget as the parameter value. 3. Once the widget receives the parameter, it renders a carousel displaying the images. The LLM will call the widget, embedding the value in the parameter through: `companion.widgetProps?.images`

Typeform

This widget displays a Typeform form embedded via a provided URL, which has been previously configured in the LLM prompt and will be inserted into the widget. \ The fields that need to be configured are: * URL: This sets the link to the Typeform form that will be displayed. For example: [https://form.typeform.com/to/e](https://form.typeform.com/to/dIJ3NiKf)xampleID * Description: Describe to the agent when this widget will be displayed in the chat. Sequence process: 1. The widget will be created with description and configuration fields, which will include the Typeform URL. 2. The LLM will retrieve this information and call the widget when needed, based on the provided description and LLM instruction. 3. The widget will be rendered via the URL in the configuration, but only if a web plugin is available. The LLM will retrieve the URL inserted through `companion.widgetConfig?.url`

Product Catalog

This widget renders a product catalog based on information provided by the LLM. It is fully customizable, allowing you to choose which information to display and how to style it—by default, it adopts the color scheme of the configured chatbot.\ \ The fields that need to be configured are: * Display Properties: Select what key information you want to display and whether those properties need to be renamed. * In Page Navigation: Decide whether you want to browse through the products on the page or open them in a new browser tab.

* Style Properties: Set the colors the widget should use to match the desired appearance. By default, it uses the colors from the configured web plugin.

* Description: Describe to the agent when this widget will be displayed in the chat. Sequence process: 1. The widget will be created with the required fields in its configuration, and additionally, a "products" parameter will be automatically assigned. This parameter will not have an initial value but will contain the information of the products to be displayed in the catalog. 2. In the LLM prompt, the product widget will be called according to the required condition.**.** 3. When the widget is called, a tool will also be triggered beforehand, which will return the list of products to be rendered. This list will be assigned to the "products" parameter. 4. When the widget is rendered, it will use the information from the "products" parameter to display the product catalog.

*** ### Widget Form Fields * **Widget File:** The required file that will render the widget with the code configured inside. * **Name:** The widget name that will be automatically introduced by the widget file attached * **Description:** The text that will detect the agent to invoke the widget when it will be requested * **Location Selector:** How the widget will be shown in the chat * Dialog: The widget will be shown in a pop up window inside the conversation * Page: The widget will be displayed in a chat window, within the full size of the web plugin * Bottom Sheet: The widget will be shown at the bottom of conversation as a overlaid box * Under Related Message: The widget will be shown inside of a chat message given by the agent response

* **Trigger Selector:** When the widget is going to be displayed * Eager: The widget is going to be displayed instantly * Input Field: The widget is going to be displayed when click in a input button * Floating Action Button: The widget will be open clicking on a floating button at the bottom of the chat * In Message Action: The widget is going to be displayed when click in a message button

* **Configuration:** Properties are created to provide additional information to the widget that modifies its behavior or display, allowing customization as desired using a key-value structure. *(Example: A property is created to provide a URL that the widget requires to be rendered based on that URL.)* * **Parameters:** Objects with a predefined structure are created, which the widget will use to render the information based on their content. The widget will show this information when it is called. The object consists of: * Type: Select the value type that will have the parameter (STRING , BOOLEAN, INTEGER, FLOAT) * Name: The key name that will have the parameter * Description: The text that will say when the parameter will be used * Default Value: The initialized value that the parameter has when the is called * Required: Determine if the default value is mandatory or not. *(Example: When you want to render a product widget and display additional details not included in the widget file, the parameters will display those extra details.)* *** ### Create a Custom Widget This section will explain how to create an advanced widget step by step, what its data structure is like, and what the relationship is between the LLM and the widget. {% stepper %} {% step %} Create the Widget File To start creating a widget, we first need to configure or create the file that will contain all the logic and code for the widget we want to render. This would be the basic structure of the code we’ll need: ```jsx import { React, ReactDOM } from ""; import htm from ""; const html = htm.bind(React.createElement); const WidgetComponent= ({ companion }) => { return html``; }; function renderWidget(companion) { ReactDOM.render( html`<${WidgetComponent} companion=${companion} />`, window.loader.container() ); } function unrenderWidget() { ReactDOM.render("", window.loader.container()); } window.loader.register("widget_name", renderWidget, unrenderWidget); ``` Now let's go through each part of the code and explain what it is and what its functionality is. * **Importing React and ReactDOM:** The code imports `React` and `ReactDOM` from a CDN using the `es-react` package, which offers lightweight React bindings ideal for embedding widgets. * **Importing HTM:** The `htm` library is imported, allowing the use of HTML-like syntax in JavaScript without requiring JSX or a build process. * **Binding HTM to React:** `htm` is bound to `React.createElement`, enabling the use of tagged template literals to write React components in a cleaner and more flexible way. *This file is not tied to any specific framework—you can use **any JavaScript framework or library** to build your widget. React is just one example.* ```javascript import { React, ReactDOM } from ""; import htm from ""; const html = htm.bind(React.createElement); ``` In this block of code, we define the component or function that will contain the information and logic for what we want to render. In this case, it will render a card with the name of a car, its image, and several details related to that car. Access to the `config` and `parameters` info is available via `companion` prop, enabling extension of the code implementation as needed. * To access `config`, use `companion.widgetConfig?.property_name` * To access `parameters`, use `companion.widgetProps?.parameter_name` ```javascript /* //Base Component const WidgetComponent= ({ companion }) => { return html``; }; */ const CarWidget = ({ companion }) => { // Use case with a config property to enter the name car in widgets page const carName = companion.widgetConfig?.car_name const carInfo = companion.widgetProps?.car_info /* car_info = `{ "engine": "2.3L EcoBoost® Engine with 315 HP", "additionalInfo": "Selectable Drive Modes", "features": "12.4” Digital Instrument Cluster and 13.2” Touchscreen" }` */ return html`

${carName || "Ford Mustang"}

${carInfo.engine}

${carInfo.additionalInfo}

${carInfo.features}

` } ``` This block of code has `renderWidget` function that is responsible for rendering the widget into the DOM. * It receives a `companion` object as a parameter, which contains the data that will be passed to the widget. * Inside the function, `ReactDOM.render()` is used to render the `WidgetComponent` and inject it into the DOM element returned by `window.loader.container()`. * The `companion` object is passed as a prop to the `WidgetComponent`, allowing it to use that data when rendering its content. ```javascript function renderWidget(companion) { ReactDOM.render( html`<${CarWidget} companion=${companion} />`, window.loader.container() ) } ``` The `unrenderWidget` function is responsible for **removing the rendered widget** from the DOM. * It uses `ReactDOM.render()` to render an empty string (`""`), which essentially removes the existing content inside the container. * The second argument, `window.loader.container()`, specifies the DOM element where the widget was originally rendered. This ensures that the content is removed from the same location. ```javascript function unrenderWidget() { ReactDOM.render("", window.loader.container()) } ``` This method **`window.loader.register`** is used to register the widget with a loader, allowing it to be managed dynamically (e.g., shown or removed based on some conditions). * **`"show_car"`**: This is the name or identifier for the widget. It's essentially a label that the loader will use to recognize and manage this widget. * **`renderWidget`**: This is the function that will be called when the widget needs to be rendered (i.e., displayed on the page). It contains the logic to inject the widget into the DOM. * **`unrenderWidget`**: This is the function that will be called when the widget needs to be removed from the page. It contains the logic to clear the widget from the DOM. ```jsx window.loader.register("show_car", renderWidget, unrenderWidget) ``` {% endstep %} {% step %} Complete the required fields When a valid JavaScript file for the widget has been attached, an input field will appear displaying the identifier name of the widget that has been configured in the file:

Now, you need to write a description of the widget, which will explain when it will be invoked by the agent. Prompt examples for description: * *When the user is interested in Ford Mustang car call this widget* * *When user shows interest in booking a meet call this widget* * *When user ask for a location call this widget* Also, select the modes for how the widget will be displayed (Location Selector) and how the widget will be opened (Trigger Selector), with the option to hide the trigger if desired.

{% endstep %} {% step %} (Optional) - Add extra information And as the last step, if desired, extra information can be added in Config and Parameters, which will enhance the widget's potential according to the needs.

Once the widget has been successfully created, you can interact with the agent, and depending on how it's configured, it will call the widget whenever it's needed in the conversation:

When a widget is created has the following structure: ```json { "id": "abc-abc-abc-abc-abc", "created": "2025-04-03T07:15:31.286405Z", "modified": "2025-04-03T07:15:31.286405Z", "parent": "message", "trigger": "ima", "source": "https://file-in-cloud.com", "description": "When this widget is going to be used", "name": "widget_name", "config": { "car_name": "Ford Mustang", }, "parameters": { "car_info": { "id": "abc-abc-abc-abc-abc", "key": "car_info", "type": "string", "default": "", "required": false, "placement": "data", "properties": {}, "description": "The info of the car" } }, "active": null, "project": "abc-abc-abc-abc-abc", "user": "abc-abc-abc-abc-abc" } ``` ```tsx interface Widget { id: string; created: string; modified: string; parent: "message" | "dialog" | "sheet" | "page"; trigger: "eager" | "ima" | "input" | "fab"; source: File; // File attached as FormData description: string; name: string; config: null | Record; // Transform to JSON parameters: null | Record; active: null; project: string; user: string; } ``` * **id:** Unique widget identifier, automatically assigned by the Caleida API. * **created:** The timestamp indicating when the widget was initially created. Set automatically by the Caleida API. * **modified:** The timestamp of the most recent update to the widget, also set automatically by the Caleida API. * **parent** *(Location Selector)*: Specifies how and where the widget will appear when invoked. * **trigger** *(Trigger Selector)*: Defines the mechanism or event that opens the widget. * **source** *(Widget File)*: The uploaded file containing the widget's rendering code. * **description:** A text prompt that helps the agent determine when to invoke the widget. * **name:** The name of the widget, automatically extracted from the attached widget file. * **config:** A list of properties that provide additional metadata or settings for the widget. * **parameters:** A list of objects used to supply additional contextual information when the widget is triggered. * **active:** Indicates whether the widget is currently active or not. * **project:** Identifier of the project where the widget was created; set automatically by the Caleida API. * **user:** Identifier of the user who created the widget; also automatically set by the Caleida API. {% endstep %} {% endstepper %} # How it works? How to use human intervention. ## Human Intervention With the ability to follow conversations in real-time, we have added the **Human Intervention** option. This allows you to interrupt your Agent at the precise moment to interact as a human with your customer, thereby enhancing the user experience. ### Access Real-Time Conversations You can access this feature from various parts of our **Dashboard**, giving you the freedom to intervene in any conversation happening in real-time. #### From Conversations To access from **Conversations**, navigate to **Conversations > Chat History** in the sidebar menu, and once inside, click on the conversation you want to intervene in. Disable the Agent in the bottom left corner and you can start talking with your customer.

#### From Campaigns To access from **Campaigns**, navigate to **Campaigns** in the sidebar menu, and once inside, click on the conversation you want to intervene in. Disable the Agent in the bottom left corner, and you can start talking with your customer. #### From Alerts To access from **Alerts**, just navigate to **Alerts** in the sidebar menu, and once inside, click on the alert for the conversation you want to intervene in. Disable the Agent in the bottom left corner, and you can start talking with your customer.

### Deactivate the Agent To intervene in a conversation, simply deactivate the Agent by clicking the purple button that says **“Agent Activated”**.

Once this is done, you will be able to converse directly with the user.

If you still have doubts, we recommend you take a look at this video: That concludes the tutorial for . Remember, if you have any questions, you can contact the Caleida team at . # How do I make my subscription payment and manage my invoices? ## **Introduction** Once your 5 days of Free Trial are over, you will only need to upgrade your Agent to the plan that best suits your needs. Choose from one of our 4 available plans or, if necessary, we can develop a custom plan tailored to your business, adapting to your needs, objectives, and preferences. ### **1. Upgrading an Active Subscription or Free Trial.** In the Dashboard, at the bottom left, you will find your active subscription. Click on **Upgrade plan** to enhance it.

Once inside, compare our plans and choose the one that best suits your needs: * **Elemental AI Agent:** Ideal for small businesses or startups with slightly tighter budgets. This level provides the basic level of our services, suitable for covering customer service and sales agent needs. * **Pro AI Agent:** Suitable for medium-sized companies that need more advanced functionality due to higher traffic. This level can be very useful for improving the efficiency of your customer service, generating leads, or providing more advanced sales support. * **Plus AI Agent:** Suitable for larger entities. This is the ideal plan for companies with a higher volume of queries and that require an expert consultant to resolve doubts and optimize AI processes. * **Prime AI Agent:** Designed for large corporations or companies with highly customized and demanding needs in terms of performance and functionality. * **Enterprise Plan:** Customized and tailored plans with specific features at all levels, including payment methods and billing. Remember, you can change your plan at any time.

	IA Elemental	IA Pro	IA Plus	IA Prime	Enterprise Plan
Maximum number of users your Agent will converse with.	125	750	2500	5500	As many users as you need
Documentation Pages.	1500	2000	3000	4000	As many pages as you need
Integration on Web, WhatsApp Business, Telegram, API...	✅	✅	✅	✅	Developed by the Caleida team
Campaigns: Allows your Agent to initiate and continue WhatsApp conversations.	❌	✅	✅	✅	✅
Intelligent Analysis: Extract qualitative Insights from your Agent's conversations.	✅	✅	✅	✅	Adapted to the needs of your business
Option to remove Caleida watermark.	❌	✅	✅	✅	✅
Priority technical support.	❌	❌	✅	✅	✅
Consultant: Enjoy two monthly hours with a Caleida expert to resolve doubts and optimize AI processes.	❌	❌	❌	✅	✅
Monthly price	49€/month	99€/month	299€/month	499€/month	Personalized
Annual price	490€/year	990€/year	2990€/year	4990€/year	Personalized

* Subscribe for 12 months and get a **20% discount**. * **Technical Integration Assistant:** We help you set up Caleida in your business if you subscribe to our **Pro AI Agent annual subscription or higher.** ### **2. Make the Payment** Once you have chosen the plan, you will access the Stripe payment gateway. On the left, you will see a breakdown of the price of your subscription. Fill in the fields on the right. If you are purchasing as a company, make sure to check the box and fill in the fields with your company name and VAT number. Once everything is ready, click on the **Pay and subscribe** button.

### **3. Control Your Billing** To keep track of your subscription and Usage Statistics, simply access the **Billing** section located in the dropdown menu under **"My Account"**, at the top right of the Dashboard. Once on this page, you will find two sections: * **Subscription** * **Usage Statistics** In the **Subscription** section, you can see which plan you currently have active, switch plans, and manage your payments.

By clicking on "**Manage now**," you can modify your payment methods, billing information, and view your invoice history.

On the Usage Statistics page, you can view both the responses consumed by your Agent this month and the number of pages consumed this month.