# How to generate and manage API keys in Release0 Source: https://docs.release0.com/account/apikey Learn how to create, manage, and delete API keys for authenticating your applications. This guide covers the process of generating API keys, their usage in external services, and how to securely manage them within your Release0 account. This is where you can manage your API keys. In this section it will show you the API keys you have created and you can create new ones. API keys To create a new API key, click on the **Create API Key** button. This will open a modal where you can enter the name of the API key. Once you have entered the information, click on the **Create API Key** button to create the API key. This will generate a new API key that you can use to authenticate your requests to the API. You can copy the API key and use it in your application. Create API key You can also delete an API key by clicking on the **Delete** button next to the API key you want to delete. This will remove the API key from your account and it will no longer be valid for authentication. Delete API key # How to manage your account across all workspaces Source: https://docs.release0.com/account/general Manage your account settings and preferences across all workspaces. This guide covers how to access user settings, update your profile, manage notifications, and handle API keys. User Settings are accessible from the bottom left corner of the side menu. They are not spwecific to a workspace, but rather apply to your entire account. This means that any changes you make in the User Settings will be reflected across all workspaces you have access to. User workspace This will open the **User Settings** menu, where you can manage your account settings, notifications, and API keys. User settings You can access the following settings from the **User Settings** menu: ### Account This is where you can update your name, email address, user ID, avatar image, set your default workspacce and delete your account. * **Name**: Your display name. * **Email**: Your email address. This is used for notifications and account recovery. * **Avatar**: Your profile picture. This is used to identify you in the app and in notifications. * **User ID**: Your unique identifier. This is used to identify you in the database and in the API. * **Default Workspace**: The workspace that will be selected by default when you log in. You can change it at any time. * **Delete Account**: Use this option to permanently delete your account. This action is irreversible and will delete all data associated with your account, including workspaces, agents, and settings. This action cannot be undone so be careful when using it. ### Notifications This is where you can manage your notification settings by adjusting the type of notifications you receive. You can choose to receive notifications for: * Agent usage limit alert * Montlhy agents usage report * Domain configuration updates * Subscription to product updates ### API Keys This is where you can manage your API keys. In this section it will show you the API keys you have created and you can create new ones. API keys # How to manage Notifications in Release0 Dashboard Source: https://docs.release0.com/account/notifications Customize your notification preferences to stay updated on important account and workspace changes. This guide covers how to manage notifications for agent usage limits, monthly reports, domain updates, and product updates. ...existing code... icon: 'bell' description: Customize your notification preferences to stay updated on important account and workspace changes. This guide covers how to manage notifications for agent usage limits, monthly reports, domain updates, and product updates. -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Notifications are a crucial part of your account settings. They help you stay informed about important updates and changes related to your account and workspaces. You can access the **Notifications** settings from the **Account Settings** menu, which is located in the bottom left corner of the side menu. This section allows you to manage your notification preferences. This is where you can manage your notification settings by adjusting the type of notifications you receive. You can choose to receive notifications for: * **Agent usage limit alert**: Receive notifications when your agent usage limit is reached. * **Montlhy agents usage report**: Receive a monthly report of your top 5 agents usage and total agents created. * **Domain configuration updates**: Receive notifications when your domain configuration is updated. * **Subscription to product updates**: Receive notifications when new features are added to the platform. Notifications # How to configure Advanced Agent Settings Source: https://docs.release0.com/editor/agent-settings/advanced-settings Configure advanced options for your agent including user recognition, session handling, and response behaviors. In order to access your agent advanced settigns, open your **agent settings** and click on the three dots located at the bottom of the agent settings dialog box Release0.com - Access agent advanced settings Then clik on **Advanced Settings**. This will open a new dialog displaying an additional set of options. Release0.com - Agent advanced settings Dialog ### Remember user When this option is enabled, the user will be remembered if the user comes back after exiting the chat. This setting enables the chat session to be saved in the user’s browser storage. If a user answers a question and later closes the chat, the conversation will resume from the same point when they return. You can choose between two storage options: * **Local Storage**: The session is saved in the user’s browser and will persist across sessions, but only on the same device and browser. * **Session Storage**: The session is also stored in the user’s browser, but it is cleared once the browser tab or window is closed. This is ideal for scenarios where you want to maintain the context of the conversation, such as in customer support or interactive agents. It allows users to return to their previous conversations without losing any context. > **Note**: If you publish a new version of your Agent, any saved sessions will be automatically reset. This means that if a user has a stored session and the bot is updated in the meantime, refreshing or reopening the chat will restart the conversation from the beginning. ### Prefill fields When this option is enabled, the agent will pre-fill input fields when the associated variables have a value. ### Hide query parameters on agent start When this option is enabled, the agent will automatically hide the URL query parameters whern it starts. This is useful when you want to keep the URL clean and prevent users from seeing or modifying the query parameters that might be used to pre-fill fields or pass other information to the agent. ## Google Tag Manager Enter your Google Tag Manager id to better track your agent conversion flow. This allows you to integrate your agent with Google Tag Manager, enabling you to track user interactions, conversions, and other metrics related to your agent's performance. This is particularly useful for analyzing user behavior, optimizing the agent's performance, and improving the overall user experience. ## Allowed origins When this option is enabled, your agent will only work when invoked from specific website origins. **By default, your agent can be executed on any website**. This can prevent people from instancing your agent from other websites. Typically to prevent including your agent on another site by an iFrame method. This is useful when you want to restrict the usage of your agent to specific domains or applications, ensuring that it is only accessible in trusted environments. ## Custom head code You can add custom code to be included in the head of your agent. This code will be added at the bottom of the agent head section, just before the closing `` tag. Only meta and script tags are allowed. This feature is useful for adding custom scripts, styles, or other resources that you want to load when the agent is initialized. For example, you can include custom analytics scripts, CSS styles, or any other head elements that are necessary for your agent's functionality. Check out our blog post featuring a use case of how to use this feature to save session data in your agent to remember a user across sessions: [How to Remember Users Across Sessions](https://release0.com/blog/custom-session-auth-release0/). # How to customize your Agent Branding Settings Source: https://docs.release0.com/editor/agent-settings/agent-branding Customize or remove the footer branding from your agent chat interface for a white-label experience. ## Customize Agent Chat Footer Branding The **Branding Settings** section allows you to personalize or fully remove the footer branding from your agent chat interface. This feature is ideal for creating a **white-label experience**, enhancing professionalism, and aligning with your brand identity. > **Note**: This feature is only available for **Pro** and **Business** plans. ### Footer Customization Options You can configure the following: * **Show Brand Toggle**: Remove all branding elements from your agent. * **Brand Text and Brand Link**: Remove the default Powered by Release0 brand link and replace it with your own brand and page URL. ### Steps to Customize Branding In order to access your agent **Branding Settings**, open your agent settings and click on the three dots located at the bottom of the agent settings dialog box Agent branding access This will open the **Branding Settings** dialog box, where you can customize your agent branding. Agent branding settings * **Show Brand Toggle**: This option to remove the default branding from your agent. * **Branding Text**: Enter your brand name. * **Branding Link**: Enter the URL of your brand page. # How to set an Expiration for your Agent Source: https://docs.release0.com/editor/agent-settings/agent-expiration Learn how to set Agent Expiration in Release0 to automatically disable your chatbot after a specific date. This guide explains how to configure expiration settings, display custom messages, and set up redirects for expired agents. Set an expiration date for your agent to automatically disable access after a specific date. ``` ### 5. Additional Fields For more information on what fields you can add, refer to the MailerLite documentation: [List All Fields](https://developers.mailerlite.com/docs/fields.html#list-all-fields). *** ### Validation and Testing Before deployment, verify the following: * Ensure the **email collection step** saves the email correctly into the `{{user.email}}` variable. * Validate that the Webhook request sends data accurately to MailerLite. * Test the iframe preview to confirm it displays as expected. > **Tip**: Use [JSONLint](https://jsonlint.com/) to validate your JSON structure. # How to enable RTL (Right-to-Left) support Source: https://docs.release0.com/guides/rtl Learn how to enable right-to-left (RTL) text alignment in your agent using custom CSS for better layout and responsiveness in languages like Arabic and Hebrew. This guide provides step-by-step instructions to apply RTL styling in your chatbot. ## Steps to Enable RTL 1. Navigate to the **Theme** tab in your Agent settings. 2. Paste the following Custom CSS into the designated Custom CSS field: ```css theme={null} .agent-container { direction: rtl; } .agent-avatar-container { margin-right: 0; margin-left: 0.5rem; } .guest-container { margin-left: 0; margin-right: 50px; } ``` 3. Exit the CSS box to apply the new styling. Custom CSS RTL > **Note**: Adjust margins or padding values as needed to ensure proper alignment based on your layout preferences. ### Validation and Testing Before deployment: * Confirm that text aligns properly in right-to-left format. * Verify that margins and paddings are consistent across all elements. * Test on different devices to ensure responsiveness. # How to forward UTM parameters in your Agent Source: https://docs.release0.com/guides/utm-in-results A guide on forwarding UTM parameters to your agent for tracking and dynamic URL redirection. Learn how to declare UTM variables, pass them when launching the agent, and build redirect URLs using these parameters. ## Overview To forward **UTM parameters** to your Agent, follow these steps. The UTM parameter name will be listed in the **Variables** dropdown of your flow. You can declare it in any **Variable** dropdown, and it will appear in the **Results** tab once the Agent is launched with the declared UTM parameter. ## Steps to Forward UTM Parameters 1. **Declare the UTM Parameter Variables**: * Navigate to the **Variables** dropdown in your Agent flow editor. * Add the desired UTM parameters as variables, such as `utm_source` and `utm_value`. 2. **Pass UTM Parameters When Launching the Agent**: * Ensure the Agent is launched with the declared UTM parameters. For example: ``` https://your-agent-url.com/?utm_source=google&utm_value=ad_campaign ``` * The provided UTM values (`google` and `ad_campaign` in this example) will be automatically captured and displayed in the **Results** tab. 3. **Save UTM Parameters in Variables**: * When a UTM parameter is included in the Agent's URL, it will be stored in the corresponding variable (e.g., `utm_source`). 4. **Build a Redirect URL**: * Use the saved UTM values to construct a redirect URL in a **[Redirect Logic element](/editor/elements/logic/redirect)**. For example: ```url theme={null} https://redirect-site.com?utm_source={{utm_source}}&utm_value={{utm_value}} ``` ## Example Redirect element Here’s an example of how to build a redirect URL using the UTM variables: ```json theme={null} { "element_type": "Redirect", "url": "https://redirect-site.com?utm_source={{utm_source}}&utm_value={{utm_value}}" } ``` > **Note**: Replace `redirect-site.com` with the appropriate destination URL. ## Validation and Testing Before deployment, ensure: * All declared UTM parameters are listed correctly in the **Variables** dropdown. * The redirect URL dynamically includes the UTM parameters without errors. * The Agent properly captures and displays UTM parameters in the **Results** tab. Use tools like [JSONLint](https://jsonlint.com/) to validate JSON structures and [Markdownlint](https://github.com/DavidAnson/markdownlint) to verify the Markdown format. # Integration options for Release0 Agents Source: https://docs.release0.com/integrations/overview Explore integration options for Release0 agents, including platforms, APIs, and tools. This guide provides an overview of how to connect your chatbot agent with various services to enhance user interactions and functionality. This section allows you to integrate your agent with various platforms and tools to enhance its capabilities. You can connect your Agent to external services, databases, and APIs to create more interactive and personalized experiences for your users. Integrations Overview From a simple web URL to a seamless integration with an external app, you can integrate your Agent with a wide range of services. Here are some of the popular integrations you can use with your Agent. The integrations section is located on the top menu of the flow editor. Here you can find all the available integrations and connect your Agent with the desired platform: * **[Wordpress](/integrations/web/wordpress)**: Integrate your Agent with your Wordpress website to provide instant support to your users. * **[Shopify](/integrations/web/shopify)**: Connect your Agent with your Shopify store to provide product recommendations and answer customer queries. * **[WhatsApp](/integrations/whatsapp/overview)** *beta*: Integrate your Agent with WhatsApp to provide customer support and automate conversations. * **[Wix](/integrations/web/wix)**: Connect your Agent with your Wix website to provide instant support to your users. * **[Google Tag Manager](/integrations/web/google-tag-manager)**: Integrate your Agent with Google Tag Manager to track user interactions and improve your marketing campaigns. * **[HTML & JavaScript](/integrations/web/libraries/html-javascript)**: Embed your Agent on any website using HTML and JavaScript. * **[React](/integrations/web/libraries/react)**: Integrate your Agent with a React application or website to provide a seamless user experience. * **[NextJS](/integrations/web/libraries/next-js)**: Add Release0 functionality to your NextJS application or website to provide a dynamic experience. * **[Notion](/integrations/web/notion)**: Integrate your Agent with Notion for seamless data collection and management. * **[Webflow](/integrations/web/webflow)**: Add interactive forms to your Webflow site with Release0 integration. * **[FlutterFlow](/integrations/web/flutterflow)**: Integrate your FlutterFlow app with Release0 Agents for enhanced user interactions. * **[Framer](/integrations/web/framer)**: Use Framer's design tools to create interactive prototypes and integrate them with Release0 Agents. * **[iFrame](/integrations/web/iframe)**: Embed your Release0 agent in an iFrame to display it on any website or platform. > **Note:** Before accessing any of the integration scenarios make sure you have **published** your agent. Once your agent is published, you can access the integration scenarios and start using them. # How to add a custom domain to your Agent Source: https://docs.release0.com/integrations/web/custom-domain Learn how to bind a custom domain to your Release0 agent for better accessibility. This guide provides step-by-step instructions to set up a custom domain, enhancing your chatbot's branding and user experience." You can bind a custom domain to your **agent** in the **Workspace** settings. This allows you to use your own domain name to access your agent. For more information on how to add a custom domain to your agent please see the **[Domains](/workspace/customDomains)** section in the documentation. # How to integrate your Agent with FlutterFlow Source: https://docs.release0.com/integrations/web/flutterflow Integrate your Release0 agent with FlutterFlow using Webview elements. Follow these steps to embed your chatbot seamlessly in your FlutterFlow project. Integrating your agent with FlutterFlow is a straightforward process. Follow these steps to get started: 1. Go to the **Integrations** tab of your agent's **flow editor**. 2. Click the **FlutterFlow** button to get the embed instructions. 3. Copy the provided code snippet. Release0.com - FlutterFlow 4. Insert a **Webview** element into your FlutterFlow project. 5. Paste the code into the **Webview** element's **URL** field. Release0.com - FlutterFlow Webview 6. Save the changes to your project. 7. Your agent should now be embedded in your FlutterFlow project. 8. Test the integration by running your project and interacting with the agent. Integrations Overview # How to integrate your Agent with Framer Source: https://docs.release0.com/integrations/web/framer Embed your Release0 agent in Framer projects using the Embed component for seamless integration. This guide provides step-by-step instructions to add your agent to Framer pages. Integrating your agent with Framer is a simple process. Follow these steps to get started: 1. Go to the **Integrations** tab of your agent's **flow editor**. 2. Click the **Framer** button to get the embed instructions. 3. Copy the provided code snippet. Release0.com - Framer 4. Open your Framer project and navigate to the page where you want to embed the agent. 5. Click on the **+** icon to add a new component. 6. Select the **Embed** component from the list of available components. 7. Paste the code into the **Embed** component's code editor. Release0.com - Framer Embed 5. Save the changes to your project. 6. Your agent should now be embedded in your Framer project. 7. Test the integration by running your project and interacting with the agent. Integrations Overview # Integrate your Agent with Google Tag Manager Source: https://docs.release0.com/integrations/web/google-tag-manager Track user interactions with your Release0 agent using Google Tag Manager (GTM). This guide provides step-by-step instructions to set up GTM, create tags, and monitor user behavior on your website. Integrating your agent with Google Tag Manager (GTM) allows you to track user interactions and events on your website. This integration helps you gather valuable data about user behavior, which can be used to improve your marketing strategies and enhance the overall user experience. ### Prerequisites * A Google Tag Manager account. * A Release0 account. * An agent created and published on [release0.com](https://release0.com). ### Steps to Integrate Google Tag Manager with Release0 1. **Create a Google Tag Manager Account**: If you don't have a GTM account, create one by visiting the [Google Tag Manager website](https://tagmanager.google.com/). 2. **Create a New Container**: In your GTM account, create a new container for your website. This container will hold all the tags, triggers, and variables you want to use. 3. **Create a Google TAG**: On your GTM account dashboard, click on Add a new tag. 4. Choose Custom HTML tag type 5. Check Support document.write 6. Paste the code snippet provided by Release0 in the HTML text area. 7. On your web page, you need to have an element on which the agent will go: ```html theme={null} ``` 8. **Set Up Triggers**: Set up triggers to determine when the tag should fire. For example, you can set it to fire on all pages or specific pages where you want to track user interactions. 9. **Publish Your Container**: After setting up your tags and triggers, publish your GTM container to make the changes live on your website. 10. **Test the Integration**: Visit your website and check if the agent is loading correctly. You can use the GTM preview mode to debug and ensure that the tags are firing as expected. 11. **Monitor User Interactions**: Use Google Analytics or other tracking tools to monitor user interactions with your agent. You can set up events to track specific actions, such as button clicks or form submissions. Release0.com - Google Tag Manager # How to embed your Agent using an iframe Source: https://docs.release0.com/integrations/web/iframe Embed your Release0 agent using iframe for responsive display. This guide provides iframe code examples, configuration tips, and validation steps to ensure seamless integration. ## Embedding an agent with Iframe You can easily obtain your agent iframe code by clicking on the **“Iframe”** button within the **“Share”** tab of your Agent configuration. ### Iframe Preview When setting up the iframe, you can configure its **width** and **height** to suit your needs. A recommended default configuration is: * **Width**: `100%` * **Height**: `600px` This ensures a responsive and user-friendly display. ### Example Iframe Code ```html theme={null} ``` > **Note**: Replace `https://r0.ar/your-slug/your-agent` with the specific URL of your agent. ### Validation and Testing Before deploying your iframe, ensure the following: 1. The URL used in the `src` attribute is correct. 2. The iframe displays as expected across devices. 3. The height and width are set appropriately for your use case. For further customization, refer to the agent documentation on [release0.com](https://docs.release0.com/). # Using custom HTML and JavaScript with your Agent Source: https://docs.release0.com/integrations/web/libraries/html-javascript Learn how to integrate Release0 agents using HTML and JavaScript for web applications. Customize agent appearance, trigger actions, and handle events with ease using the provided code snippets and examples. ## Standard You can get the standard HTML and JavaScript code by clicking on the “HTML & Javascript” button in the “Share” tab of your **agent dialog**. In this section, you can modify container dimensions. Below is an example: ```html theme={null} ``` JavaScript standard This code is creating a container with a 100% width (will match parent width) and 600px height. ```ts theme={null} type AgentProps = { id?: string; agent: string | any; isPreview?: boolean; resultId?: string; initialContext?: Record; apiHost?: string; font?: | string | { type: "Google"; family?: string | undefined; } | { type: "Custom"; url?: string | undefined; family?: string | undefined; css?: string | undefined; }; progressBarRef?: HTMLDivElement; startFrom?: | { type: "group"; groupId: string; } | { type: "event"; eventId: string; }; sessionId?: string; theme?: { chatWindow?: { backgroundColor?: string; maxWidth?: string; maxHeight?: string; }; button?: { size?: "medium" | "large" | `${number}px`; backgroundColor?: string; iconColor?: string; customIconSrc?: string; customCloseIconSrc?: string; }; previewMessage?: { backgroundColor?: string; textColor?: string; closeButtonBackgroundColor?: string; closeButtonIconColor?: string; }; placement?: "left" | "right"; }; previewMessage?: { avatarUrl?: string; message: string; autoShowDelay?: number; }; autoShowDelay?: number; onNewInputelement?: (inputelement: any) => void; onAnswer?: (answer: { message: string; elementId: string }) => void; onInit?: () => void; onEnd?: () => void; onNewLogs?: ( logs: { status: string; description: string; details?: unknown; }[], ) => void; onChatStatePersisted?: (isEnabled: boolean) => void; onScriptExecutionSuccess?: (message: string) => void; }; ``` ### Multiple agents To display multiple agents on the same page, assign unique `id`props to each: ```html theme={null} ... ``` ## Popup Get the popup HTML and JavaScript code by clicking on the “HTML & Javascript” button in the “Share” tab of your agent dialog. JavaScript popus This will trigger the popup window automatically after **3 seconds**. ```ts theme={null} type PopupProps = { id?: string; agent: string | any; isPreview?: boolean; resultId?: string; initialContext?: Record; apiHost?: string; font?: | string | { type: "Google"; family?: string | undefined; } | { type: "Custom"; url?: string | undefined; family?: string | undefined; css?: string | undefined; }; progressBarRef?: HTMLDivElement; startFrom?: | { type: "group"; groupId: string; } | { type: "event"; eventId: string; }; sessionId?: string; theme?: { chatWindow?: { backgroundColor?: string; maxWidth?: string; maxHeight?: string; }; button?: { size?: "medium" | "large" | `${number}px`; backgroundColor?: string; iconColor?: string; customIconSrc?: string; customCloseIconSrc?: string; }; previewMessage?: { backgroundColor?: string; textColor?: string; closeButtonBackgroundColor?: string; closeButtonIconColor?: string; }; placement?: "left" | "right"; }; previewMessage?: { avatarUrl?: string; message: string; autoShowDelay?: number; }; autoShowDelay?: number; onNewInputelement?: (inputelement: any) => void; onAnswer?: (answer: { message: string; elementId: string }) => void; onInit?: () => void; onEnd?: () => void; onNewLogs?: ( logs: { status: string; description: string; details?: unknown; }[], ) => void; onChatStatePersisted?: (isEnabled: boolean) => void; onScriptExecutionSuccess?: (message: string) => void; autoShowDelay?: number; theme?: { width?: string; backgroundColor?: string; zIndex?: number; }; defaultOpen?: boolean; isOpen?: boolean; onOpen?: () => void; onClose?: () => void; }; ``` ## Bubble Click the “HTML & Javascript” button in the “Share” tab of your **agent dialog** to integrate the bubble. JavaScript Bubble Here is an example: ```html theme={null} ``` This will display a bubble with a preview message after **5 seconds**. ```ts theme={null} type BubbleProps = { id?: string; agent: string | any; isPreview?: boolean; resultId?: string; initialContext?: Record; apiHost?: string; font?: | string | { type: "Google"; family?: string | undefined; } | { type: "Custom"; url?: string | undefined; family?: string | undefined; css?: string | undefined; }; progressBarRef?: HTMLDivElement; startFrom?: | { type: "group"; groupId: string; } | { type: "event"; eventId: string; }; sessionId?: string; theme?: { chatWindow?: { backgroundColor?: string; maxWidth?: string; maxHeight?: string; }; button?: { size?: "medium" | "large" | `${number}px`; backgroundColor?: string; iconColor?: string; customIconSrc?: string; customCloseIconSrc?: string; }; previewMessage?: { backgroundColor?: string; textColor?: string; closeButtonBackgroundColor?: string; closeButtonIconColor?: string; }; placement?: "left" | "right"; }; previewMessage?: { avatarUrl?: string; message: string; autoShowDelay?: number; }; autoShowDelay?: number; onNewInputelement?: (inputelement: any) => void; onAnswer?: (answer: { message: string; elementId: string }) => void; onInit?: () => void; onEnd?: () => void; onNewLogs?: ( logs: { status: string; description: string; details?: unknown; }[], ) => void; onChatStatePersisted?: (isEnabled: boolean) => void; onScriptExecutionSuccess?: (message: string) => void; onOpen?: () => void; onClose?: () => void; onPreviewMessageClick?: () => void; onPreviewMessageDismissed?: () => void; }; ``` ### Custom button position You can adjust the position of the button with custom CSS. For example: ```css theme={null} agent-bubble::part(button) {   bottom: 60px; } agent-bubble::part(agent) {   bottom: 140px; height: calc(100% - 140px) } ``` If you have a preview message, you'll also have to manually position it: ```css theme={null} agent-bubble::part(preview-message) {   bottom: 140px; } ``` ## Commands Here are the commands you can use to trigger your embedded agent: * `Agent.open()`: Open popup or bubble * `Agent.close()`: Close popup or bubble * `Agent.toggle()`: Toggle the bubble or popup open/close state, * `Agent.showPreviewMessage()`: Show preview message from the bubble, * `Agent.hidePreviewMessage()`: Hide preview message from the bubble, * `Agent.setPrefilledVariables(...)`: Set prefilled variables. Example: ```js theme={null} Agent.setPrefilledVariables({ Name: 'Jhon', Email: 'john@gmail.com', }) ``` For more information, check out [Additional configuration](#additional-configuration). * `Agent.setInputValue(...)`: Set the value in the currently displayed input. You can bind these commands on a button element, for example: ```html theme={null} ``` For each command you can pass an optional `id` prop to target a specific agent. I.e. `Agent.open({ id: 'my-bubble' })` ## Callbacks If you need to trigger events on your parent website when the user interact with the agent, you can use the following callbacks: ```js theme={null} Agent.initStandard({ agent: 'my-agent', onNewInputelement: ( ) => { console.log('New input element displayed', inputelement.id) }, onAnswer: (answer) => { console.log('Answer received', answer.message, answer.elementId) }, onInit: () => { console.log('Agent initialized') }, onEnd: () => { console.log('Agent ended') }, }) ``` ## Additional configuration You can prefill the agent variable values in your embed code by adding the `initialContext` option. Here is an example: ```js theme={null} Agent.initStandard({ agent: 'my-agent', initialContext: { 'Current URL': 'https://release0.com', 'User name': 'John Doe', }, }) ``` It will prefill the `Current URL` variable with "[https://release0.com](https://release0.com)" and the `User name` variable with "John Doe". More info about variables: [here](../../../editor/variables). Note that if your site URL contains query params (i.e. [https://r0.ar/myagent?User%20name=John%20Doe](https://r0.ar/myagent?User%20name=John%20Doe)), the variables will automatically be injected to the agent. So you don't need to manually transfer query params to the agent embed configuration. # How to integrate Release0 with Next.js Source: https://docs.release0.com/integrations/web/libraries/next-js Integrate Release0 agents in Next.js applications with lazy-loaded components for optimal performance. This guide provides usage examples, and integration methods for Next.js applications. ## Installation To install the library for use with Next.js, run the following command: ```bash theme={null} npm install @release0.com/nextjs ``` ## Usage This library is a convenient wrapper around the **agent react** library. It ensures that components are **lazy-loaded** for optimal performance in your Next.js application. The NextJS component can be added integrated in 3 ways: **Standard Integration** NextJS standard **Popup Integration** NextJS popup **Bubble Integration** NextJS bubble ### Example Code Use it the same way you would use the **agent react** library. Below is an example of integration: ```javascript theme={null} import dynamic from 'next/dynamic'; // Dynamically import the agent component const agentComponent = dynamic(() => import('@release0.com/react'), { ssr: false }); export default function agentPage() { return (

Welcome to Your Agent

); } ``` ### Explanation 1. **Dynamic Import**: The library is designed for lazy-loading, which is achieved through `next/dynamic`. This ensures the component is not included in the server-side rendering (SSR) process. 2. **Agent ID**: Replace `your-agent-id` with the ID of your configured Agent. ### Validation and Testing Before deploying, confirm the following: * The `AgentComponent` renders without errors in both development and production environments. * The agent ID used corresponds to an active Agent. * Lazy-loading is functioning correctly (check the network tab for dynamic imports). # How to integrate Release0 with React Source: https://docs.release0.com/integrations/web/libraries/react Integrate Release0 agents in React applications using optimized components for seamless user experiences. This guide provides usage examples and integration methods for React projects. ## Installation To install the required package, use the following command: ```bash theme={null} npm install @release0.com/react ``` ## Standard Integration The `Standard` component creates a container with a width of 100% (matching the parent width) and a height of 600px. ```javascript theme={null} import { Standard } from '@release0.com/react'; const App = () => { return ( ); }; ``` React Standard ## Popup Integration The `Popup` component automatically triggers a popup window after a specified delay. The example below triggers it after 3 seconds: ```javascript theme={null} import { Popup } from '@release0.com/react'; const App = () => { return ; }; ``` React Popup ## Bubble Integration The `Bubble` component displays a bubble with a preview message. In this example, the message appears after 5 seconds, and you can customize the theme and avatar: ```javascript theme={null} import { Bubble } from '@release0.com/react'; const App = () => { return ( ); }; ``` React Bubble ## Additional Configuration To prefill agent variables in your embed code, use the `initialContext` option. The example below pre-populates values for `Current URL` and `User name`: ```javascript theme={null} import { Standard } from '@release0.com/react'; const App = () => { return ( ); }; ``` > **Note**: If your site URL contains query parameters (e.g., `https://release0.com?User%20name=John%20Doe`), these variables are automatically injected into the bot. Manual transfer is not necessary. *** ### Validation and Testing Before deploying, ensure: 1. All components are rendering as expected. 2. Variables are being prefilled correctly. 3. Auto-show delays and custom themes match your requirements. # How to integrate your Agent with Notion Source: https://docs.release0.com/integrations/web/notion Embed your Release0 agent in Notion pages using the embed command. This guide provides step-by-step instructions to add your agent to Notion articles and pages. Integrating your agent with Notion is a straightforward process. Follow these steps to get started: 1. Go to the **Integrations** tab of your agent's **flow editor**. 2. Click the **Notion** button to get the embed instructions. Release0.com - Notion 3. Copy the provided code snippet. 4. Edit your Notion Page/Article and paste the code copied in **step 3**\* into your Notion page by using **/embed** command Release0.com - Notion Embed 5. Save the changes to your page. 6. Your agent should now be embedded in your Notion page. 7. Test the integration by visiting your page and interacting with the agent. # Overview of embedding Release0 agents Source: https://docs.release0.com/integrations/web/overview Learn about embedding Release0 agents on your platform using standard, popup, or chat bubble methods. This guide provides an overview of the different embedding options available for your chatbot agents, including standard embed, popup embed, and chat bubble embed. To get the appropriate instructions to deploy your **agent** on your platform of choice, head over to the **Integrations** tab of your **flow editor** and select the platform you want to deploy your **agent** on. You can choose to embed your **agent** in three different ways: ## 1. Standard Embed Embeds the **agent dialog** in a box with the size of your choice anywhere on your app. This is the method used on the release0.com homepage: * You can set the width to `100%` and the height to `100%` to make it take up the entire page dimensions. ## 2. Popup Embed Embeds the **agent dialog** in a popup overlaying your website. It can be triggered in multiple ways, such as: * Automatically after a delay. * When a user clicks a specific button. ## 3. Chat Bubble Embed Embeds the **agent dialog** as a "chat bubble" at the bottom right corner of your site. This method allows for: * Automatic triggering. * Manual activation by user interaction. * Displaying a “proactive message” to engage users. > **Note**: For each option, follow the detailed steps and customization instructions available in the **Integrations** tab of your agent **flow editor**. ### Validation and Testing Before deployment, ensure: * The embed type works as expected on your platform. * Dimensions and triggers are correctly configured. * Proactive messages or delays are functioning as intended. # Embed your Agent using a script snippet Source: https://docs.release0.com/integrations/web/script Use script embed snippets to integrate Release0 agents in restricted environments. This guide provides an overview of the script embed option, including usage examples and best practices for embedding your chatbot. ## Overview The **script embed option** is ideal for cases where you **don’t have access** to the full HTML structure of your application, or when your website builder only allows inline script snippets. ### When to Use * When access to the HTML structure is restricted. * When using website builders with limited customization options. ### Recommendation Whenever possible, prefer the **[HTML & JavaScript embed instructions](./libraries/html-javascript)** over the script embed method. Script snippets are merely scripts that inject code from the HTML & JavaScript embed method, offering limited control and customization. ### Example: Script Embed Snippet Below is an example of how a script embed snippet might look: ```html theme={null} ``` > **Note**: Replace `https://your-custom-url.com/embed.js` with the actual URL of the script you want to embed. ### Validation and Testing Before deploying, ensure: * The script is embedded correctly and is functional. * The `id` in the script is unique to prevent conflicts. * The script does not interfere with other parts of the application. ### Additional Notes * Always test the snippet in a staging environment before deploying it to production. * Ensure compliance with any performance or security requirements of your website. # How to integrate Release0 with Shopify Source: https://docs.release0.com/integrations/web/shopify Embed your Release0 agent in Shopify themes using Liquid files. This guide provides step-by-step instructions to add your agent to Shopify stores, allowing you to enhance customer interactions and support. Embedding your agent in Shopify is a straightforward process. Follow these steps to get started: 1. Go to the **Integrations** tab of your agent's **flow editor**. 2. Click the **Shopify** button to get the embed instructions. 3. Copy the provided code snippet. 4. Paste the code into your Shopify theme's **Liquid** file, typically in the `theme.liquid` file. 5. Save the changes to your theme. 6. Your agent should now be embedded in your Shopify store. 7. Test the integration by visiting your store and interacting with the agent. 8. If you encounter any issues, double-check the code placement and ensure there are no conflicting scripts in your theme. Release0.com - Shopify # How to integrate Release0 with Webflow Source: https://docs.release0.com/integrations/web/webflow Embed your Release0 agent in Webflow projects and trigger commands on button clicks. This guide provides step-by-step instructions to add your agent to Webflow pages, including advanced features like triggering commands on button clicks. ## Embedding Your agent in Webflow To embed your agent in Webflow, follow these steps: 1. Go to the **Integrations** tab of your agent's **flow editor**. 2. Click the **Webflow** button to get the embed instructions. ## Advanced Guides ### Trigger an agent Command on Button Click You can trigger an agent command (like opening a popup) when a button is clicked. Here's how: 1. Assign a unique ID to your button: * Navigate to the **Settings** tab of the button in Webflow. * Add a dedicated ID to the button element. 2. Update your embed code: * In the existing ` ``` > **Note**: Replace `BUTTON_ID_1` and `BUTTON_ID_2` with the actual IDs assigned to your buttons. ## Example Use Case In this example, clicking the specified buttons will open the agent popup. However, you can replace `Agent.open()` with any other command supported by the [Java library commands](./libraries/html-javascript#commands). ## Validation and Testing Before deploying, ensure: * All button IDs match those specified in the script. * The JavaScript code does not contain syntax errors. * The agent popup works as expected when the buttons are clicked. # How to integrate Release0 with Wix Source: https://docs.release0.com/integrations/web/wix Integrate your Release0 agent in Wix sites using the Custom Code section. This guide provides step-by-step instructions to add your agent to Wix pages, allowing you to enhance customer interactions and support. Integrating your agent with Wix is a straightforward process. Follow these steps to get started: 1. Go to the **Integrations** tab of your agent's **flow editor**. 2. Click the **Wix** button to get the embed instructions. 3. Copy the provided code snippet. 4. Paste the code into your Wix site's **Custom Code** section. Editor:Add > Embed Code > Embed html 5. Save the changes to your site. 6. Your agent should now be embedded in your Wix site. 7. Test the integration by visiting your site and interacting with the agent. Release0.com - Wix # How to integrate Release0 with WordPress Source: https://docs.release0.com/integrations/web/wordpress Embed Release0 agents in WordPress sites using the official plugin. This guide provides step-by-step instructions to add your agent to WordPress pages, including embedding options and personalization features. The **[WordPress plugin](https://wordpress.org/plugins/release0/)** allows seamless embedding of agents into your WordPress site. Follow these steps to get started. ### Prerequisites Before using the plugin, you need to: 1. Create and publish your first agent on [release0.com](https://release0.com). 2. Generate the initialization snippet from the **Integrations** tab of your agent's **flow editor**. Release0.com - WordPress ## Agent Settings ### Embedding Options 1. **Generate Initialization Snippet**: * Go to the **Integrations** tab of your agent's **flow editor**. * Click on the **WordPress** button to configure the embed code. 2. **Embedding Modes**: * **Standard Container**: Paste the shortcode anywhere on your site. Release0.com - WordPress Standard Container * **Popup or agent Dialog**: Use the following format Release0.com - WordPress Popup * **Bubble** or Chat Bubble: Use the following format Release0.com - WordPress Bubble > **Note**: You can customize this snippet from the **Integrations** tab of your agent's **flow editor**. ### Excluded Pages To exclude the a from specific pages, provide a comma-separated list of page paths. #### Examples: | Path | Exclusion Behavior | | ---------------- | ------------------------------------------------------------ | | `/app/*` | Excludes all pages starting with `/app/`. | | `/app` | Excludes only the `/app` page. | | `/app?param=1` | Excludes `/app` only when the query parameter is set to `1`. | | `/app?param=*` | Excludes `/app` with any `param` query value. | | `/app/*?param=*` | Excludes all `/app/` pages with any `param` query value. | ### Personalizing the User Experience Enhance user experience by injecting WordPress-specific variables directly into your agent. #### Steps: 1. Use the WordPress plugin for release0.com. 2. Declare variables in your agent with **exact syntax**. * Example: For `WP Email`, ensure the variable is spelled as `WP Email` (case-sensitive). > **Note**: Incorrect syntax, such as `wp Email` or `WP email`, will not work. ## Troubleshooting #### LiteSpeed Cache Issues 1. **Localize Resources**: * Remove the URL `https://cdn.jsdelivr.net` from LiteSpeed’s "Localize Resources" list. 2. **JS Exclusion**: * Add `web.js` and `agent` to the **JS Excludes** and **JS Deferred Excludes** fields in LiteSpeed's **Tuning Settings**. #### WP Rocket Cache Plugin 1. Navigate to **Settings > WP Rocket > Excluded Inline JavaScript**. 2. Add the term `agent`. 3. Save changes. #### Script Defer Issues * If a plugin adds the `defer` attribute to external scripts, add an exception for `agent` in the plugin's configuration. 🎉 Now that you've seen the technical steps, explore our [WordPress integration blog post](https://release0.com/blog/integrate-release0-agent-to-wordpress) to see real-world examples and creative ways to use Release0 on your site. # How to create a WhatsApp Meta app Source: https://docs.release0.com/integrations/whatsapp/create-meta-app Step-by-step guide to creating a WhatsApp Meta app and connecting it to Release0 agents. This guide covers creating a Facebook Business account, setting up a Meta app, and linking it to your agent dialog. ## 1. Create a Facebook Business Account To begin, you need a Facebook Business account: 1. Visit [Facebook Business](https://business.facebook.com) and log in with your Facebook credentials. 2. In the left sidebar, select **Create a new business account**. 3. If Meta restricts your newly created Business account, you may need to verify your identity. Follow the on-screen prompts to complete the verification process. *** ## 2. Create a Meta App Next, you’ll create a Meta app to connect to WhatsApp: 1. Go to the [Facebook for Developers page](https://developers.facebook.com/apps). 2. Click on **Create App**. 3. Under the **What do you want your app to do?** section, select **Other**. 4. Choose **Business** as the app type. 5. Provide a name for your app and link it to your newly created Business account. 6. On the app's dashboard, locate the **WhatsApp** product and enable it. *** ## 3. Connect the Meta App to Your Agent Dialog Once the WhatsApp product is enabled, follow these steps: 1. Navigate to the **Integrations** tab of your agent's **flow editor**. 2. Use the instructions provided to link your Meta app to the agent dialog. > **Note**: Ensure that your Meta app is fully configured and your Business account is verified to avoid interruptions. *** ### Validation and Testing Before finalizing your setup: * Verify that your Business account is active and unrestricted. * Confirm the WhatsApp product is correctly enabled in the Meta app. * Test the connection between the Meta app and your agent dialog. For further assistance, consult the [Meta Developer Documentation](https://developers.facebook.com/docs). # How to integrate Release0 with WhatsApp (BETA) Source: https://docs.release0.com/integrations/whatsapp/overview Learn how to integrate and test Release0 agents in WhatsApp, including limitations and preview options. This guide provides step-by-step instructions for setting up your agent in WhatsApp, including configuration options and testing methods. ## Preview You can preview and test your bot by clicking the **Preview** button in the editor and changing the runtime to “WhatsApp”. ### WhatsApp Preview Dropdown * Select "WhatsApp" from the runtime options to simulate the bot's behavior in the WhatsApp environment. *** ## Limitations When building your bot for WhatsApp, consider the following restrictions: * **Unsupported Media**: * GIF and SVG image files are not supported. * Only **.mp4** videos are supported. Refer to the [Supported Media Types](https://developers.facebook.com/docs/whatsapp/cloud-api/reference/media#supported-media-types) for more details. * **Button Limitations**: * Button content cannot exceed **20 characters**. Content exceeding this limit will be truncated. * WhatsApp displays only **3 buttons** at a time. To include more buttons, the system adds "..." messages to show additional options. * **Skipped elements**: Certain elements are incompatible with WhatsApp and will be ignored: * Payment input element * Chatwoot element * Text input element configured as a **password field** * Script or Set Variable element with `Execute on client` option enabled * Google Analytics element * Meta Pixel element * Cal.com element *** ## Contact Information To assign contact details such as name and phone number to variables, use a **Set Variable** element with dedicated system values. These variables can automatically store: * Contact name * Phone number *** ## Deploy on Your Phone Number To integrate your agent with WhatsApp: 1. Go to the **Integrations** tab of your agent's **flow editor**. 2. Click the **WhatsApp** button. 3. Follow the provided instructions to complete the integration. *** ## Configuration ### Session Expiration Timeout * Define a timeout value (from **0 to 48 hours**) for the session. * If a user remains inactive beyond this timeout, their session expires, and a new conversation starts upon their next message. * Default: **4 hours**. ### Start Bot Condition * Configure a condition to trigger the bot when a user starts a conversation. * If the condition is unmet, the bot will not be activated. *** ## Collect Position You can request the user’s location with a basic **Text input element**. The collected position will be saved as a variable in the format: ``` , ``` ### Example Flow ```plaintext theme={null} User > Bot > Position Collection ``` *** ## Validation and Testing Before deployment, ensure: 1. All limitations are addressed (e.g., button length, media types). 2. The **Set Variable** element is properly configured for contact details. 3. The bot operates seamlessly in WhatsApp's runtime environment. > **Note**: Always test your bot thoroughly in the WhatsApp Preview mode to verify compatibility and performance. ## FAQ You can integrate as many numbers as you'd like. Keep in mind that Release0 does not provide those numbers. We work as a "Bring your own Meta application" and we give you clear instructions on [how to set up your Meta app](/integrations/whatsapp/create-meta-app). Yes, you can. You will have to add a "Start bot condition" to each of your bots to make sure that the right bot is triggered when a user starts a conversation. You integrate your agents with your own WhatsApp Business Platform which is the official service from Meta. At the moment, the first 1,000 Service conversations each month are free. For more information, refer to their documentation This can be due to a mismatch between the WhatsApp number displayed in your WhatsApp application profile settings and the number you have typed in your Agent configuration. For example, in Argentina they have 2 numbers, 1 with 8 digits, the other with 9 digits. In Release0, you need to type the number that is displayed in your WhatsApp application profile settings to make sure the bot works properly. # How to report Agent abuse or misuse Source: https://docs.release0.com/report-abuse Understand the content restrictions and reporting guidelines on Release0. Learn how to report abuse or misuse of chatbot agents, including scams, phishing, and intellectual property violations. At **release0.com**, we uphold freedom of speech while recognizing our responsibility to keep the platform free from illegal content. Here are examples of content that is not allowed on **release0.com**: 1. **Scams and Fraud**: Content engaging in or promoting fraudulent schemes, scams, or con artistry designed to deceive and potentially divest users of their assets, personal information, or other valuables. 2. **Phishing**: Content or communications unlawfully attempting to acquire sensitive information such as usernames, passwords, financial details, or other personal data by masquerading as a trustworthy entity. 3. **Sexual Exploitation and Abuse**: Illegal material that involves or promotes sexual exploitation, such as child sexual abuse material, non-consensual pornography, or content connected to human trafficking. 4. **Intellectual Property Violations**: Content infringing on copyrights, patents, trademarks, or trade secrets of others without authorization, violating intellectual property laws. 5. **Privacy Violations**: Unlawfully sharing or distributing someone else's personal or confidential information without explicit consent. This list is not exhaustive. **release0.com** continually monitors its platform and will take action on content that violates these restrictions, ensuring compliance with laws and our company policies to maintain a secure environment for all users. > **Note**: Users are responsible for ensuring that their published bots and conduct on our platform adhere to relevant laws and our Terms of Service. For further guidance, consult legal counsel or refer to applicable local and international regulations. ## 🚨 Report Abuse If you believe an agent violates our **[Terms of Service](https://release0.com/legal/terms)**, please report it by clicking the **[Abuse Report Agent](https://r0.ar/release0-web/abuse-report)** button. > ⚠️ **Important**: Abuse reports are taken seriously. Submissions will be reviewed by our moderation team promptly. # How to use Release0 Analytics Source: https://docs.release0.com/submission/analytics Gain insights into user behavior and optimize chat flows with Release0 analytics. This guide provides an overview of the in-depth analytics feature, including user drop-off points, actionable insights, and conversion tracking. ## Overview The **in-depth analytics** feature enables you to: * Identify **user drop-off points** during interactions. * Gain **actionable insights** into user behavior. * Incrementally improve your **chat conversion rate**. Agent interactions ## Benefits * **Track User Engagement**: Understand where users spend the most time and where they disengage. * **Optimize Chat Flows**: Use data-driven insights to refine conversation paths. * **Boost Conversion Rates**: Leverage analytics to enhance user experience and improve outcomes. ## Key Features | Feature | Description | | ----------------------- | -------------------------------------------------------- | | **Drop-Off Analysis** | Identifies steps in the chat flow where users leave. | | **Behavioral Insights** | Tracks user actions and decision points during chats. | | **Conversion Tracking** | Measures the percentage of users who complete key goals. | Agent funnel ## Agent conversation tracking Server-side agent tracking is enabled by default for all Release0 agents and come with the following attributes: | Attribute | Description | | :---------- | :------------------------------------------------------- | | `agent` | The agent name | | `domain` | The domain where the agent was executed | | `tag` | The tag label assigned to the agent | | `country` | The country of the user who initiated the agent | | `city` | The city of the user who initiated the agent | | `region` | The Region of the user who initiated the agent | | `continent` | The continent of the user who initiated the agent | | `device` | The device of the user who initiated the agent | | `browser` | The browser of the user who initiated the agent | | `os` | The operating system of the user who initiated the agent | These events happen on the server-side and cannot be elemented by browser extensions or ad-elementers, which improves the accuracy of your analytics data. Agent interactions ## How to Use 1. **Access Analytics**: Navigate to the "Analytics" section in your dashboard. 2. **Review Key Metrics**: * Check user drop-off rates in each conversation step. * Analyze popular paths and common bottlenecks. 3. **Implement Improvements**: * Adjust conversation flows based on insights. * Test changes to observe their impact on user behavior. 4. **Monitor Results**: Regularly review analytics to ensure ongoing optimization. ## Example Here’s an example of how analytics can be used to improve performance: > **Scenario**: You notice a high drop-off rate on the step where users are asked for their email.\ > **Action**: Simplify the question or provide more context to assure users about data privacy.\ > **Result**: A decrease in drop-offs and an increase in email submissions. ## Validation and Testing Before deploying changes based on analytics insights, ensure: * Data is correctly captured and visualized in the dashboard. * Any adjustments to the chat flow are tested for usability and clarity. * Conversion rates are monitored to validate the effectiveness of changes. > **Note**: Regularly update your chat flow based on the latest analytics data to maintain optimal performance. # How to handle submissions in Release0 Source: https://docs.release0.com/submission/overview Learn how to view and manage user submissions in Release0. This guide covers how to access, filter, and export user data collected from your chatbot agent interactions, including handling partially filled results and using analytics features. ## Viewing Results Once your **Agent** is published, you’ll start collecting results from your users. These results are accessible in the workspace view by clicking the context menu next to your agent name. Agent context Your Agent results can also be accessed under the **Submission tab** of your Agent flow editor. Submissions There is also a quick overview summary of the submissions located on the **workspace** view inside the **Agent** card. Submissions Summary In this quick view you can see the conversation **Starts**, this refers to each time the agent is started with at least one user interaction. Also it shows the total number of **Submissions** or number of users that have completed the agent conversation flow. Lastly it shows the last update of the agent configuration. ### Partially Filled Results You might notice some partially filled results in your data. This is **normal and expected**. Your **Agent** collects answers as soon as they are provided by the user, even if they don’t complete the entire conversation. > **Note**: Partially filled results help you understand where users drop off, offering opportunities to improve your Agent’s performance. This is one of **release0.com’s** greatest features and it is explained in more detail in the [Analytics](/submission/analytics) section. *** ## Features in the Results Tab ### Time Filter By default, results from the last 7 days are displayed. You can adjust this by using the **date filter button** located at the top right corner of the submission table. Submissions Date ### Export Results to CSV You can export all results to a CSV file by clicking on the **Export** option. This generates a CSV file containing all the current results from your Agent. Submissions Download **Include Deleted elements**: If enabled, this will include answers from elements that are no longer part of your Agent (e.g., removed in a previous version). Submissions export ### Re-arrange and Hide Columns To make your results table easier to read, you can: * Re-arrange specific columns. * Hide columns that are not relevant. Submissions fields > **Tip**: Use exported CSV files to perform further analysis in tools like Excel or Google Sheets for insights into user behavior. # How to use Real-Time Analytics Source: https://docs.release0.com/submission/realtime Track and analyze real-time agent events in Release0. This guide provides an overview of the real-time events stream, including filtering options and attributes for monitoring user interactions with your chatbot agent. ## Overview On any given day, we track upwards of 100,000 Agent events at Release0. These events are ingested into our data warehouse, which is then materialized in a comprehensive, real-time analytics dashboard that gives you powerful insights into your Agent performance. While this is great, it is still an aggregated view of your data. What if you want to see a chronological stream of Agent events and export them for further analysis? This is where Release0's Real-time Events feature comes in. Release0's Real-time Events Stream is a detailed, real-time stream of events across your entire Release0 workspace. To access your real-time events stream, navigate to the **Realtime** section in your workspace side menu. Realtime events You can filter your realtime view with the following attributes: | Attribute | Description | | :---------- | :--------------------------------------------------- | | `agent` | The agent name | | `domain` | The domain where the agent was executed | | `tag` | The tag label assigned to the agent | | `country` | The country of the user who initiated the agent | | `city` | The city of the user who initiated the agent | | `region` | The Region of the user who initiated the agent | | `continent` | The continent of the user who initiated the agent | | `device` | The device of the user who initiated the agent | | `browser` | The browser of the user who initiated the agent | | `os` | The operating system of the user initiated the agent | These events happen on the server-side and cannot be elemented by browser extensions or ad-elementers, which improves the accuracy of your analytics data. # How to use the Shared Dashboard Source: https://docs.release0.com/submission/shared-dashboard Share public analytics dashboards for your Release0 agents with stakeholders. This guide provides step-by-step instructions to create and manage shared dashboards, including password protection and sharing options. The **Shared Dashboard** is a public analytics dashboard that allows you to share your agent's performance metrics with anyone, even if they don't have a Release0 account. This feature is particularly useful for showcasing your agent's capabilities to stakeholders or clients. For further control, you can also set a password for your public analytics dashboard to restrict access. ## How to Create a Shared Dashboard To create a shared dashboard, follow these steps: 1. Click on your agents name in the top left corner of the flow editor.This will open the agent settings. 2. Click on the **Shared Dashboard** option at the bottom of the settings menu. Release0.com - Shared Dashboard Agent Settings 3. In the Shared Dashboard settings, you can: * **Enable Sharing**: Toggle the switch to make your dashboard public. * **Password protection**: If you want to restrict access, set a password that users must enter to view the dashboard. * **Copy the Dashboard Link**: Once enabled, you can copy the link to share with others. Release0.com - Shared Dashboard settings 4. Share the link with anyone you want to give access to your agent's performance metrics. 5. If you set a password, users will need to enter it to view the dashboard. 6. You can disable sharing at any time by toggling the switch off in the Shared Dashboard settings. Release0.com - Shared Dashboard # Release0 Support Source: https://docs.release0.com/support This guide helps you understand what our team can assist with, when a request becomes consulting, and how to get the fastest resolution possible. ## What does Release0 support cover? We assist with day-to-day platform usage, configuration issues, and general product guidance. ## What does Release0 support cover? We assist with day-to-day platform usage, configuration issues, and general product guidance. ## What's Included (vs. Not Included) | ✅ Included in Standard Support | ❌ Not Included (Consulting or Out of Scope) | | ------------------------------------------------ | ----------------------------------------------------------- | | Bug reporting and resolution | Designing full agents or flows from scratch | | Questions about the dashboard/editor | Creating custom APIs or webhook logic | | Supported integrations (Google Sheets, WhatsApp) | Debugging third-party tools outside Release0 | | Publishing agents and reading basic analytics | Copywriting, UX, or custom guides tailored to your business | | Workspace access and permissions | Advanced analytics strategy or campaign design | ## Support vs Consulting | 🛠️ Support | 🧪 Consulting | | ------------------------------------------------- | ------------------------------------------------------ | | Duration: under 30 minutes | Extended dedication (+30 min) | | Technical issues (bugs, errors, integration help) | Designing custom logic, flow architecture | | Quick usage questions (“How do I publish?”) | Onboarding, training, or sessions with your team | | Fixing documented issues | Creating custom documentation or walkthroughs | | Basic billing or workspace configuration | Advanced API mapping or tailored integration workflows | > **Note**: If resolving your request requires more than **30 minutes** of custom work, we’ll treat it as a consulting engagement. This helps ensure quality, dedicated time and clear expectations. > **Need custom help?**\ > Submit a [Consulting Request](https://agent.r0.ar/consulting-services-request) and we’ll assess feasibility and timelines for your project. ## What’s not included in support? These require extended, specialized help and fall under consulting. | Request Type | Support | Consulting | | ------------------------------------------- | ------- | ---------- | | Complex chatbot architecture | ❌ No | ✅ Yes | | Multi-step automations with conditions | ❌ No | ✅ Yes | | Cross-tool data syncing with business logic | ❌ No | ✅ Yes | | Personalized funnel optimization | ❌ No | ✅ Yes | ## SLA by Plan | Plan | Priority | Response Time (Business Hours) | | -------------- | --------- | ------------------------------ | | Hobby / Free | 🟢 Low | No SLA | | Pro / Business | 🟡 Medium | Within 24 hours | | Enterprise | 🔴 High | \< 12 hours via direct channel | ## Complement: Request Prioritization We triage incoming tickets based on urgency and whether the topic is already documented. | Type of Inquiry | Priority | | ----------------------------------- | --------- | | ❗ Bug or service outage | 🔴 High | | 🤔 Complex or undocumented question | 🟡 Medium | | 📖 Covered in documentation | 🟢 Low | ## Support vs Feature Request | Type | Purpose | Where to Submit | | ------- | ---------------------------- | ----------------------------------------------------------- | | Support | Errors, issues, usage help | 💬 [In-app chat](https://agent.r0.ar/support) | | Request | New features or improvements | 🧠 [Feature Requests](https://release0.com/feature-request) | ## How do I contact support? * 💬 In-app chat (recommended) * 📩 **Email**: `support@release0.com` * 💬 **Discord**: [release0.com/discord](https://release0.com/discord)\ → Community tips, peer help, networking, and informal feedback ## Communication Strategy We believe in **clarity, empowerment, and speed**. Here’s how we approach support: ### 1. Start with the Docs → It’s faster! Check [docs.release0.com](https://docs.release0.com) before writing to us. Most questions are answered instantly. > ⚡ “You’ll often solve it in minutes — no need to wait your turn.” ### 2. Support = second step > If it’s not in the docs or something’s broken, reach out. We're ready. ### 3. Shared efficiency = better help > “Self-service first lets us prioritize complex issues faster — including yours.” ### Example: How to Get Help Efficiently **First, check the official documentation**\ [docs.release0.com](https://docs.release0.com) — tutorials and walkthroughs for most common questions. **Then check the platform status**\ [status.release0.com](https://status.release0.com) — real-time platform and integration status.\ → No need to open a ticket if it’s already reported there. **Still stuck?**\ Use the in-app chat to reach support directly. **Want to suggest a feature?**\ Post it on [Feature Requests](https://release0.com/feature-request) — votes influence our roadmap! ## Summary: Which Channel to Use? | Resource | Use it for... | | --------------------- | --------------------------------------------------- | | `docs.release0.com` | FAQs, how-to guides, quick answers | | `status.release0.com` | Live system status, outages, maintenance | | In-app chat | Bugs, usage issues, agent configuration | | Feature Requests | Product ideas, improvements, feedback | | Discord | Community support, user tips, informal conversation | ## Quick Links * [Documentation](https://docs.release0.com) * [Platform Status](https://status.release0.com) * [Support Chat (in-app)](https://agent.r0.ar/support) * [Feature Requests](https://release0.com/feature-request) * [Join our Discord](https://release0.com/discord) * [Submit a Consulting Request](https://agent.r0.ar/consulting-services-request) *** We’re here to support your growth — and empower you to build faster, every day. # How to customize the font in Release0 Source: https://docs.release0.com/theme/font Learn how to customize fonts for your Release0 agent, including Google Fonts and custom options. This guide provides step-by-step instructions to change the font of your chatbot agent, including how to import custom fonts and define the @font-face rule. ## Changing the Font You can customize your agent’s font from the **Theme** tab, under the **Global** section. ### Font Options * **Google Fonts**: Select a font from Google Fonts. * **Custom Font**: Define your own custom font. *** ## How to Import a Custom Font? To import your own font, follow these steps: 1. Go to the **Theme tab** under the **Global section**. 2. Select the **Custom** option. 3. Define the **font family** and provide the CSS `@font-face` properties. ### Example: Importing a Custom Font If you want to import a font named *Awesome Font*, you would define the font family as follows: ```css theme={null} "Awesome Font", "Helvetica Neue", sans-serif; ``` * **Note**: A font name with white space should be enclosed in quotes. For example: `"Awesome Font"`. * The browser uses the first available font from the list. If the first font is unavailable, the browser tries the next one. ### Defining the `@font-face` Rule Here is an example of the required CSS for the font: ```css theme={null} @font-face { font-family: 'Awesome Font'; src: url('https://example.com/awesome.woff') format('woff'), url('https://example.com/awesome.ttf') format('truetype'); } ``` ### Requirements for Custom Fonts * The server hosting the font files (e.g., `https://example.com/awesome.woff`) **must support HTTPS**. * Ensure the server also supports **Cross-Origin Resource Sharing (CORS)**. > **Note**: Misconfigured CORS policies may prevent the font from loading. Always test your custom font implementation. # Customizing Release0 Agent appearance Source: https://docs.release0.com/theme/overview Customize the appearance of your Release0 agent, including templates, chat bubbles, and CSS. This guide provides an overview of the Theme section, including how to change the agent's look and feel, customize chat bubbles, and apply custom CSS styles. The **Theme** section allows you to customize the appearance of your Agent. ## Template The **Template** section provides a variety of pre-designed themes to choose from. You can select a template that best fits your needs and customize it further. ## Global This section enables you to: * Enable or disable the Agent branding. * Change the font used by your Agent. * Customize the background of your Agent. * Show the Agent's flow progress bar. Agent Global ## Chat container This section allows you to personalize the chat window's appearance. You can adjust the following elements: * Text color * Max width * Max height * Background type * Border * Roundness Chat container ## Agent Bubble This section allows you to customize the appearance of the Agent's chat bubble. You can adjust the following elements: * Show or hide Agent's avatar * Avatar image * Text color * Background color * Background type * Border * Roundness * Opacity Agent bubble To change the avatar image: 1. Click on the toggle to show the avatar. 2. Click on the agent avatar within the **Chat** section. 3. Upload or select a new image. Change agent avatar Once changed, you can preview the changes in the preview pane and see your chat agent in action. Agent avatar ## Guest Bubble This section allows you to customize the appearance of the user's chat bubble. You can adjust the following elements: * Show or hide user's avatar * Avatar image * Text color * Background color * Background type * Border * Roundness * Opacity Guest bubble To change the avatar image: 1. Click on the user's avatar within the **Chat** section. 2. Upload or select a new image. Change agent avatar Once changed, you can preview the changes in the preview pane and see your chat agent in action. Agent avatar ## Buttons This section allows you to customize the appearance of the buttons. You can adjust the following elements: * Text color * Background color * Background type * Border * Roundness * Opacity * Shadow * builder Buttons ## Inputs This section allows you to customize the appearance of the inputs. You can adjust the following elements: * Text color * Placeholder color * Background color * Background type * Opacity * Border * Roundness * Shadow * builder Inputs ## Typing This section allows you to customize the typing behaviour of your agent. You can adjust the following elements: * Typing emulation: * Enable or disable typing emulation. * Adjust the typing speed (in milliseconds). * Adjust the maximum delay between messages (in seconds) * Adjust the delay before the first message is sent (in seconds). Typing ## Custom CSS For advanced customization, you can add your own CSS styles. Custom css ### Inspecting Elements for Custom CSS 1. Navigate to the **Theme** page. 2. Right-click on the agent or the specific element you want to modify. 3. Select **Inspect** to view and target the element's CSS. ### Example: Rounded Buttons with Gradient Colors To create buttons with rounded corners and a gradient color, add the following CSS: ```css theme={null} .agent-button { border-radius: 40px; background-image: linear-gradient(to right, #e052a0, #f15c41); border: none; } ``` ### Example: Configuring RTL chat You can configure the chat to be displayed in RTL (Right-to-Left) format by adding the following CSS: ```css theme={null} .agent-container { direction: rtl; } .agent-avatar-container { margin-right: 0; margin-left: 0.5rem; } .guest-container { margin-left: 0; margin-right: 50px; } ``` Custom CSS RTL ### Example: Customize a Single Button’s Color You can customize the color of an individual button by targeting its `data-itemid` attribute. For instance: ```css theme={null} [data-itemid='cl3iunm4p000f2e6gfr8cznnn'] { background-color: gray; border-color: gray; } ``` #### Finding the Button's `data-itemid` 1. Right-click on the button you want to customize. 2. Select **Inspect** to view the `data-itemid` attribute in the HTML. > **Note**: Always test your customizations in a staging environment before applying them to your live Agent. *** ### Validation and Testing Before applying your customizations: * Ensure that the custom CSS is properly formatted. * Test changes across different devices and browsers for consistency. * Verify that all visual components work as intended. # How to manage team members access Source: https://docs.release0.com/workspace/add-members-and-guests Learn about inviting members and assigning roles in your Release0 workspace. This guide covers how to manage team members, including Admins and Members, and how to invite them to your workspace. Members are people like team mates or customers you can invite to your workspace. You can invite members to your workspace by sending them an invitation email. Members can be assigned different roles in the workspace, such as Admins or Members. ## Roles in a Workspace There are two roles users can have in a **release0.com** workspace: * **Admins**: Manage workspace settings, delete a workspace, and manage other admins, members, and guests. * **Members**: Team members who can create and edit Agents but cannot edit workspace settings or add members. ## How to Invite Admins and Members 1. Navigate to your workspace. 2. Click the **Settings** button and then go to the **Members** section. 3. You will see the **Workspace members list** and the invitations tab: * Here, you can invite new admins or members. * You can also assign admin roles to existing members. To invite a new member or admin, click the **Add Member** button and enter the email address of the person you want to invite. User workspace Then add the email address of the person you want to invite and select the role you want to assign to them. Add member email Once the invite email is sent, the person will receive an email with a link to join the workspace. They will be able to access the workspace by clicking the link and signing in or creating a new account. While the invitation is pending, you can see its status in the **Invitations** tab. Keep in mind that there is a limit to how many members you can add to your workspace. Please check out our [pricing page](https://release0.com/pricing) for details on the limits per plan. # How to manage billing and subscriptions Source: https://docs.release0.com/workspace/billing Manage your subscription and billing information in Release0, including plan upgrades and invoices. This guide provides an overview of how to handle billing for your workspace, including upgrading plans, changing payment methods, and canceling subscriptions. This is where you manage your subscription and billing information. Subscriptions are a way to manage your workspace's usage and access to features. You can upgrade, downgrade, or cancel your subscription at any time. Each new workspace starts with a **Hobby** plan that has plenty of features to get you started. When needed, you can extend your workspace’s capabilities by upgrading to a **Professional** or **Business** plan. * Your workspace's total usage and limits * Your current plan. * Paid invoices. Subscription overview ## Upgrade Plan To upgrade your workspace plan and increase your monthly limits, open the Workspace **Settings** and scroll down to the Upgrade section. Upgrade plan This will show the next available tier for your workspace. You can select the plan you want to upgrade to and click the **Upgrade** button. This will take you to the billing portal where you can complete the upgrade process. *** ## Change Payment Method To update your payment information for your workspace: 1. Open the **Settings** and scroll down to the **Payment methods** 2. Click the button to access the billing portal, where you change your payment method. Change payment ## Cancel Plan To cancel your workspace plan: 1. Open the **Settings** and scroll down to the **Payment methods** 2. Click the button to access the billing portal, where you can manage and cancel your subscription. > **Note**: Ensure to save any necessary data before canceling your plan, as access may be limited afterward. # How to set up custom domains in Release0 Source: https://docs.release0.com/workspace/customDomains Discover how to use custom domains for your Release0 agents to enhance brand recognition. This guide provides step-by-step instructions to set up custom domains, including using Release0's free domain or your own, and configuring SSL certificates for secure connections. Whenever you're creating an Agent for marketing purposes, support or lead generation, it is important to use a custom domain for better brand recognition. At **Release0** we offer our own domain **'release0.ar'** for your agents for free. However, you can also use your own custom domain for your agents. Check out our [pricing page](https://release0.com/pricing) for details about custom domain limits per plan. ### Premium Short Domain Now Available Starting with the **Business plan and above**, you can now publish your Release0 agents using the premium short domain: `r0.ar` This feature unlocks: * A **clean and professional** URL for your agents * **Shorter, more memorable** links (e.g., `https://r0.ar/your-slug/agent`) * **Simplified QR codes** for easier scanning and better aesthetics * Improved branding and shareability across platforms > **Available from Pro plan onwards** — no additional setup needed. ## SSL Certificates * When you use **our provided domains**, we automatically **generate and manage SSL certificates for you**. This means that your agents will always be served over HTTPS, ensuring a secure connection for your users. * When you bring **your own custom domain**, we also automatically **generate and manage SSL certificates for you**. This means that your agents will always be served over HTTPS, ensuring a secure connection for your users. * We use **Let's Encrypt** as our certificate authority to issue these SSL certificates. * **Certificate generation may take a few minutes**, especially right after connecting a custom domain. Please allow some time for the setup to complete. ## Prerequisites 1. A Release0 Workspace. If you don't have one, you can create one for free. 2. A custom domain that you own. If you don't have one, you can purchase one from a domain registrar like [GoDaddy](https://www.godaddy.com/), [Namecheap](https://www.namecheap.com/), or [Google Squarespace](https://domains.squarespace.com/). 3. Access to your domain registrar's DNS settings. ## Step 1 Add a Custom Domain 1. Go to the **Settings** menu in your workspace. 2. Click on **Domains**. Release0.com - Add new domain 3. Click on **Add Domain** button Release0.com - Add domain name 4. Enter your custom domain name in the *Your domain*\* field and click **Add Domain**. > **Note:** If you are bringing your own custom domain, your agent link do not use a **[workspace slug](/workspace/general#workspace-slug)**. The slug is only used for the domains provided by Release0 (e.g. `release0.ar/your-slug/agent`). ## Step 2 Configure your domain After adding your domain, you will see a new domain in the entry list, click on the config gear and you'll be presented with a DNS record that you'll need to add to your domain's DNS settings. Release0.com - DNS settings Use the information provided to add a new A record or CNAME record to your domain registrar's DNS settings. The CNAME record should point to the provided value. ## Step 2a: Adding an Apex Domain If you're adding an apex domain (e.g. `example.com`), you'll need to add an **A record** with the following values: ```plaintext theme={null} Name: @ (or leave it blank) Value: 76.76.21.21 TTL: 86400 (or the highest value possible) ``` ## Step 2b: Adding a Subdomain If you're adding a subdomain (e.g. `my-agent.mycompany.com`), you'll need to add a **CNAME record** with the following values: ```plaintext theme={null} Name: my-agent (or whatever subdomain you want to use) Value: cname.r0.ar TTL: 86400 (or the highest value possible) ``` > **Note:** We do not support using `www.` as a subdomain, since the `www.` subdomain will always redirect to the apex domain instead. ## How long do I have to wait for my domain to work? Domain configuration can take anywhere between 1 to 24 hours to complete. If your domain still doesn't work after 24 hours, please [reach out to us](https://agent.r0.ar/support) and we'll be happy to help you out. ### Recommended Subdomain Variations We recommend using the following variations for your subdomains: * `agent.example.com` * `support.example.com` * `nps.example.com` * `salesbot.example.com` # Overview of Release0 workspaces Source: https://docs.release0.com/workspace/general Overview of Release0 workspaces, including settings, plans, and member management. This guide covers how to manage your workspace, including workspace name, slug, logo, and credentials. Learn how to add members, manage billing, and customize your workspace settings. ## Workspace Overview Everything you do in an **Release0** takes place in a workspace. A workspace is like a home. It includes members, which could be just you, your team, or the entire company. Your plan is tied to your workspace. For example, if you have a **Business plan** workspace and create a new one, the new workspace will default to a **Hobby** plan. You can create as many workspaces as you want but you can only have **2 Hobby** (free) workspaces at a given time. Most of the workspace settings can be accessed by selecting the workspace name from the dropdown in the top left corner of the dashboard, and then selecting **Settings**. List workspace ## Workspace Name This is the name of your workspace. You can change it at any time. The name of the workspace is used to identify it in the dropdown menu. It allows a maximum of 32 characters. ## Workspace Slug It's your workspace unique slug on Release0. It is used to identify your workspace in the flow URL and they are also used as part of your agent public URL. The slug is automatically generated when you create a new workspace, but you can change it at any time. The slug must be unique and can only contain lowercase letters, numbers, and hyphens. It cannot contain spaces or special characters. The slug is used to access your workspace in the URL. For example, if your workspace slug is `my-slug`, you can access it at `https://r0.ar/my-slug/my-agent`. It is important to know that if you change the slug, the URL of your agents will also change. For example, if you change the slug from `my-slug` to `my-new-slug`, the URL of your agents will change from `https://r0.ar/my-slug/my-agent` to `https://r0.ar/my-new-slug/my-agent`. > **Note:** If you are bringing your own custom domain, your agent link do not use a **[workspace slug](/workspace/general#workspace-slug)**. The slug is only used for the domains provided by Release0 (e.g. `release0.ar/your-slug/agent`). ## Workspace Logo This is the logo of your workspace. You can upload a new logo at any time. The logo is used to identify your workspace in the dropdown menu and in the URL. It is also used in the email notifications sent to your members. ## Workspace ID It is a unique internal identifier for your workspace. It is used to identify your workspace in the database and in the API. You can find it in the **Settings** tab of your workspace. ## Delete Workspace Use this option to permanently delete your workspace. This action is **irreversible** and all data associated with the workspace will be **lost**, including agents, members, and settings. This action cannot be undone so be careful when using it. ## Workspace Credentials **Workspace Credentials** are used to securely connect Release0 agents with external services, such as APIs or third-party platforms. When you create a new credential in your agent, it is automatically stored as a *workspace-level credential*. This means: * It is shared across all agents in the workspace. * All workspace members can use it in their flows. * You only need to manage the credential in one place. **Note**: These credentials are isolated per workspace and never shared across organizations. To add a new credential click on the **Add Credential** button, select the name of the service from the dropdown list and fill in the required information. Add Credentials ## Domains Domains are used to access your workspace and agents. You can add your own custom domain to your workspace to use it for your agents. For more detail on how to add a custom domain to your workspace, please see the [Custom Domain](/workspace/customDomains) documentation. ## Tags Tags are used to categorize your agents within a workspace. You can add multiple tags to your agents to help you organize and search for them. please see the [Tags section](/workspace/tags) of the documentation for more details. ## Team Members ### Members List A person becomes a member of a workspace when they have access to the entire workspace. Once added, the workspace will be visible in their dropdown menu: For more information on how to add members to your workspace, please see the [Members](/workspace/add-members-and-guests) documentation. User workspace ### Admins Administrators have full management access to the workspace. They can: * Invite new members. * Manage workspace settings. * Handle billing. * Perform additional administrative actions. ## Delete a Workspace To delete a workspace, navigate to the general tab under workspace settings and proceed with the deletion: Release0.com - Workspace delete # How to use tags in Release0 Source: https://docs.release0.com/workspace/tags Learn how to use tags to organize and filter your Release0 agents effectively. This guide provides an overview of creating, managing, and utilizing tags to categorize your agents within a workspace. Tags are used to categorize your agents within a workspace. You can add multiple tags to your agents to help you organize and search for them. ### What is a Tag? A tag is a label that you can assign to an agent. Tags are color-coded and can be created and assigned to an agent in just a few clicks. With tags, you can: * Organize your agents by campaigns, clients, or any other categories you can think of. * Filter your agents by tags and get a shareable link to the filtered results. * Filter your [analytics](/submission/analytics) by tags to see how your agents are performing. ### How to create a Tag? There are two ways to create a tag: From the Workspace settings: Navigate to the workspace settings page in your workspace and select the tags tab. Click on the **Create Tag** button and enter the tag name and color. You can Also edit and delete tags from this page. Tags settings #### Create tag From the agent configuration: If you are in the flow editor, click on the agent name to open the agent configuration. Then click on the tags section and type the name of the new tag. If the tag does not exist, it will be created. You can also select a color for the tag. Additionally, there is a link to manage tags, allowing you to edit or delete existing ones. Add Tags from agent Keep in mind that the number of tags available on your workspace are are subject to limits based on your plan. Please check the [pricing page](https://release0.com/pricing) for more information.