Search Results for 'wordpress'
Found 143 results
How to install live chat on a WordPress website?
WordPress is a popular Content Management System. If you are hosting your website on WordPress, you can add a Chatwoot live chat widget and talk to your visitors in real time. This can be done in 4 simple steps using Chatwoot’s WordPress plugin. Step 1. Download the Chatwoot plugin Download the Zip file of the latest Chatwoot WordPress plugin from GitHub, as shown below. Step 2. Upload the plugin to your WordPress website Log in to your WordPress account. Navigate to the Admin Panel and click “Plugins” from the sidebar. You will be able to see the "Add New" button. You will see an option to upload the plugin, as shown in the screenshot below. Click “Upload” and select the Zip file downloaded in step 1. Step 3. Activate the plugin Once the plugin is uploaded, you will see a Success screen with the "Activate Plugin" option, as shown below. Click the "Activate Plugin” button. Congrats! The plugin is now installed. To complete the configuration, you must share the Chatwoot app credentials, as shown in the steps below. Step 4. Configure the plugin Now, you will be able to see “Chatwoot Settings” under your "Settings" menu. Click on that to update the live-chat configuration. You will be presented with the Settings screen as shown below. Configure your Chatwoot plugin here to make it work. You need to create a Website inbox on your Chatwoot installation. Please refer to this guide to create a website channel inbox. The form fields are explained below. 1. Chatwoot Website Token / Chatwoot Installation URL Once you create a website channel inbox in your Chatwoot installation, you will get a script. You can copy the Token and the URL as shown below. 2. Widget Design Chatwoot supports two live chat widget designs–Standard Design and an Expanded Bubble design. Choose your preference. 3. Widget Position You can select where to place the live-chat widget on the website based on your preference. The available options are Left & Right. 4. Language Chatwoot support 30+ languages. The default language is English. 5. Launcher text This is an optional field. If you use the expanded bubble design, you can use the launcher text to customize the text displayed on the bubble. Once you complete the form, click the "Save changes" button. Also, ensure that you have set up the website inbox from Chatwoot. Step 5. Verify that the plugin is working correctly Visit your website and see if the widget appears on the website!
⚙️ How ToPurchasing a Paid Self-Hosted Chatwoot License: A Step-by-Step Guide
Chatwoot Products Overview Chatwoot offers two product options to suit your needs: 1. Chatwoot Cloud Version: We handle all the infrastructure and maintenance so you can focus on your business operations. Simply visit chatwoot.com, sign in, and you'll be ready to send your first message in under 5 minutes. 2. Chatwoot Self-Hosted Version: This option gives you full control, with your team responsible for hosting the software on your own servers and managing maintenance. We don't have access to these instances, ensuring your data remains completely within your environment. The self-hosted version provides you with complete data sovereignty while still delivering all the powerful features of Chatwoot. Our self-hosted version comes in two tiers: - Premium Self-Hosted Version: Access all PRO features including Captain AI and SLAs, plus receive premium support throughout your Chatwoot journey. - Free Self-Hosted Community Edition: Available under the MIT License, this version is completely free to use. Set it up using our developer guide at https://developers.chatwoot.com/self-hosted. Note that this version doesn't include premium support—you'll need to handle hosting, maintenance, and troubleshooting independently. How to Purchase a Premium License for Your Self-Hosted Chatwoot Account STEP 1: After self-hosting your Chatwoot instance, access your Super Admin panel by visiting https:///super_admin and log in. STEP 2: Click on the settings button in the left navigation bar to access your settings page. STEP 3: On the settings page, click the "Manage" button to purchase a premium license. STEP 4: Select a pricing plan that best suits your requirements and complete the payment process. STEP 5: After payment, return to your settings page to verify that the correct pro plan has been activated for your account. Enjoy your Chatwoot experience! If you have any questions along the way, please feel free to reach out to our support team. We'll be happy to assist you!
đź’¬ Website live chatHow to install live-chat on a React Native app?
If you have a React Native app, you can add Chatwoot live chat widget and talk to your visitors in real-time. This can be done in 3 simple steps using the Chatwoot plugin. Step 1. Create a website inbox in Chatwoot​ Please refer to this guide for detailed instructions on setting a website inbox in Chatwoot. Step 2. Add the plugin to your project​ Add one of the following plugins to your project. yarn add @chatwoot/react-native-widget or npm install --save @chatwoot/react-native-widget --save This library depends on react-native-webview and async-storage. Please follow the instructions provided in the docs. iOS Installation​ If you're using React Native versions > 60.0, it's relatively straightforward. cd ios && pod install Step 3. Use it like this​ Replace websiteToken and baseUrl with appropriate values. import React, { useState } from 'react'; import { StyleSheet, View, SafeAreaView, TouchableOpacity, Text } from 'react-native'; import ChatWootWidget from '@chatwoot/react-native-widget'; const App = () => { const [showWidget, toggleWidget] = useState(false); const user = { identifier: 'john@gmail.com', name: 'John Samuel', avatar_url: '', email: 'john@gmail.com', identifier_hash: '', }; const customAttributes = { accountId: 1, pricingPlan: 'paid', status: 'active' }; const websiteToken = 'WEBSITE_TOKEN'; const baseUrl = 'CHATWOOT_INSTALLATION_URL'; const locale = 'en'; return ( <SafeAreaView style={styles.container}> <View> <TouchableOpacity style={styles.button} onPress={() => toggleWidget(true)}> <Text style={styles.buttonText}>Open widget</Text> </TouchableOpacity> </View> { showWidget&& <ChatWootWidget websiteToken={websiteToken} locale={locale} baseUrl={baseUrl} closeModal={() => toggleWidget(false)} isModalVisible={showWidget} user={user} customAttributes={customAttributes} /> } </SafeAreaView> ); }; const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', }, button: { height: 48, marginTop: 32, paddingTop: 8, paddingBottom: 8, backgroundColor: '#1F93FF', borderRadius: 8, borderWidth: 1, borderColor: '#fff', justifyContent: 'center', }, buttonText: { color: '#fff', textAlign: 'center', paddingLeft: 10, fontWeight: '600', fontSize: 16, paddingRight: 10, }, }); export default App; And...you're done. Check out the complete example here.
🔥 CaptainAdd documents to Captain's knowledge
Discover Documents teach your assistant about your product. Add website pages or PDF files, and Captain reads them, answers from them, and creates FAQs from them. Plan & access: Startups, Business or Enterprise Pricing & Plans. Administrators add, refresh and delete documents. Every paid plan includes up to 2,000 documents. The limit is shared by all assistants in the account, and each PDF or crawled web page counts as one document. Set up & try Before you start - An assistant. See Set up a Captain assistant and connect your inboxes. - Website pages must be public. Captain cannot read pages behind a login. - PDFs must be 10MB or smaller and contain real text (scanned images may not be readable). - If your website blocks crawlers in robots.txt, allow Chatwoot first (below). Add a website or PDF 1. Go to Captain > Documents. 2. Click Create a new document. 3. Choose the Document Type: - URL: enter the page address. Captain reads that page and the pages linked under the same path. For example, https://example.com/help covers every page that starts with that address. - PDF File: click Choose PDF file and pick the file. 4. Optional: add a Document Name (Optional). 5. Choose the assistant and click Create. Captain reads and indexes the content. Pages it finds while crawling are added as separate documents. Allow Chatwoot to crawl your site Chatwoot uses Firecrawl to read websites, and it follows your robots.txt. If some pages are blocked, add this to https://yourdomain.com/robots.txt: User-agent: FirecrawlAgent Allow: / Check the file is live at that address, then add or refresh the document. If your robots.txt blocks the crawler when you add a website, no pages are added and no error is shown. The assistant then gives incomplete or generic answers. Test it 1. Open the document's menu and choose View details. 2. Check Crawled content (or PDF details) shows your text, and Related FAQs lists sensible questions. 3. Ask a question from that page in the assistant's Playground. Get value - Keep documents current: use Refresh now on one document, or select several and click Refresh. The list shows when each was last updated. - Website documents also refresh automatically: monthly on Startups (on the 1st), weekly on Business (on Sundays) and daily on Enterprise. Processing can take longer, so a page may not refresh at that exact time. Uploaded PDFs are not refreshed automatically. - One website crawl adds up to 500 pages, and never more than your remaining document allowance. - Prefer focused sources, such as your help center, over a whole marketing site. - Used in conversations shows which conversations used a document. - Deleting a document removes everything Captain learned from it. - Help Center articles are not read automatically. To use them, add your Help Center's address as a URL document. Each language version of an article is a separate page, so each counts as a document. - FAQs created from a document go live straight away. They are listed under FAQs and need no approval. - FAQs that Captain generates are always in your account's language. The assistant still replies in the customer's language. - Captain does not remove personal or confidential details from what you add. Only add content you are happy for the assistant to quote to customers. Troubleshoot Symptom Likely cause What to do Status shows Failed to sync with Access denied The page needs a login, or your site blocked the request (error 401 or 403). Make the page public, or allow the request on your site. Added a website but no pages appear, or answers are generic Your robots.txt may block the crawler. Allow it as shown in Allow Chatwoot to crawl your site , then add the document again. Page not found URL is wrong or the page moved Fix the URL and add it again Page took too long to respond Your site was slow Use Retry refresh later Page returned empty content Content loads only with scripts, or the page is empty Use a page with plain text, or upload a PDF update stalled A refresh did not finish Use Retry refresh PDF details says readable content could not be extracted Scanned or image-only PDF Upload a text PDF Banner: Document limit reached The account has 2,000 documents across all its assistants Delete documents you no longer need, or see Pricing & Plans More causes: Troubleshoot Captain.
đź‘ť Setup accountCreating a Chatwoot Account
This guide walks you through creating a new Chatwoot account — whether you're using Chatwoot Cloud (the hosted version at chatwoot.com) or your own self-hosted installation. Cloud or self-hosted? Pick the path that matches your setup. Cloud Self-hosted Where you sign up chatwoot.com your-installation-url/app/auth/signup Hosting Managed by Chatwoot You operate the server Updates Automatic You handle them Best for Most teams that want to skip ops Teams with strict data-residency or self-management requirements If you're not sure which you're using, ask your IT team — or assume Cloud unless you've been told otherwise. Signing up on Chatwoot Cloud Step 1 — Open the signup page Go to chatwoot.com and click Signup button. Step 2 — Fill in the signup form You'll be asked for five things: Field What to enter Work email A valid work email address — this is what you'll use to log in. E.g. john.hopkins[@]companyname.com . Password Must include at least one uppercase letter (A–Z), at least one digit (0–9), and at least one special character Click Create an account to submit. Step 3 — Verify your email Chatwoot sends an email titled "Confirmation Instructions" to the work email you signed up with. Open it and click Confirm my account. The link logs you back into the dashboard. Can't find the email? Check your spam folder first, then your work email's quarantine. Some organizations have email-security policies that block external automated emails from reaching the inbox — if that's the case, ask your IT admin to release the message from quarantine or allow Chatwoot's sending domain. Signing up on a self-hosted installation If your team runs its own Chatwoot, the signup flow is the same, only the URL is different. Open: {your-installation-url}/app/auth/signup Replace {your-installation-url} with whatever your team uses (e.g. support.acme.com). The form fields are identical to Cloud. Email confirmation works the same way, assuming your installation is configured to send email. Self-hosted installations often have additional configuration steps (custom domain, SMTP, SAML SSO). Those are documented separately in the Chatwoot self-hosted guides. Next Steps:​ We recommend you follow the steps below to set up your account and get the full power of Chatwoot. You can also go through the Chatwoot 101 lessons to learn the ins and outs of effective customer engagement using Chatwoot. - Configure your profile: Set your name, picture, password, and more. - Configure account details: Setup your account’s name, language, etc. - Add Agents: Add your team members to your account to help manage conversations. - Add Inboxes: Add your conversation inboxes/channels like website widget, Facebook, WhatsApp, etc. - Configure your chat widget: Personalize your website chat widget. - Add Teams: Setup your teams like Sales, Services, Product, etc. - Add Labels: Setup labels for categorizing your contacts/conversations. - Add Canned Responses: Create your saved reply templates for frequently asked questions. - Integrations: Integrate Chatwoot with your favorite apps, or use Webhooks. - Applications: Connect your account with applications for better workflows.
WhatsappConnect with Quick setup with Meta
Quick setup with Meta (also called Embedded Signup) connects your number through a Meta window. Chatwoot sets up the webhook, token and phone number for you. Plan & access - Chatwoot Cloud: included from the Startups plan. During the free trial, click Request access, describe how you will use WhatsApp, and click Submit to turn it on. WhatsApp is not available on the free Hacker plan. See Pricing & Plans. - Self-hosted: available only if your installation has its own Meta app configured for Quick setup (WhatsApp App ID, Configuration ID and App Secret, set by your installation's administrator). If the Connect with WhatsApp Business button does not appear, use manual setup instead. See WhatsApp Embedded Signup for self-hosted. - Administrators only. Before you start - Sign in to Facebook with an account that is an admin of the right Meta business portfolio. - Allow pop-ups for Chatwoot and Facebook. - Keeping the WhatsApp Business app (Coexistence): update the app to the latest version and keep the phone online. Coexistence works with the WhatsApp Business app, not the personal WhatsApp app. Meta decides which numbers are eligible. - Do not delete your WhatsApp Business app account to use Coexistence. If Meta says your number is not eligible, or that it is connected to another provider, contact support before you disconnect or change anything. - Know the Coexistence limits before you connect: when you connect, Meta unlinks all linked devices (such as WhatsApp Web and desktop), so you need to link them again afterwards. WhatsApp for Windows and WhatsApp for Wear OS are not supported. Group chats are not synced and cannot be used in Chatwoot. Meta also limits other app features, such as broadcast lists and disappearing messages. See Meta's Onboarding WhatsApp Business app users for the full list. - If you will create a new business portfolio in the Meta window, have your business details ready: name, address and website. Connect your number 1. Go to Settings › Inboxes › Add Inbox › WhatsApp and choose WhatsApp Cloud. 2. Click Connect with WhatsApp Business. A Meta window opens. 3. In the Meta window, sign in, then choose or create your business portfolio and WhatsApp Business Account. 4. Choose your number: - A new number: enter it and verify it with the code Meta sends by SMS or voice call. - A number in the WhatsApp Business app (Coexistence): choose to connect your existing app, then: 1. Copy the verification code shown in the Meta window. 2. On your phone, open the message from Facebook Business, tap Connect, then Connect to the Business Platform. 3. Tap Confirm and choose whether to share your chat history with Meta. This does not import old chats into Chatwoot. 4. Enter the copied code in the app, then finish the steps in the Meta window. 5. When setup finishes, Chatwoot shows You can now engage with your customers through your new Channel. Happy supporting and opens the Agents step. Pick the agents who should answer this inbox and click Add agents. Test it: send a WhatsApp message to your business number from another phone. It should appear as a new conversation. Reply from Chatwoot and check it arrives. With Coexistence, also check the app on your phone still works. What happens next - Templates approved in your WhatsApp Business Account sync to Chatwoot automatically. See Templates and the 24-hour window. - Calling: if calling is available on your plan, Chatwoot tries to turn it on during setup. If your number is not enrolled with Meta's Calling API, the inbox is still created and you can turn calling on later. See WhatsApp calling. - Chat history (Coexistence): Chatwoot does not import chats from before you connected. From the moment you connect, new messages from customers appear in Chatwoot, and replies you send from the WhatsApp Business app on your phone also appear in the conversation. - Meta reviews: Meta may ask you to verify your business (upload documents) and will review your display name. Track both in Account Health. See Manage your WhatsApp number. If Quick setup is unavailable Sometimes Meta restricts Quick setup for all providers. Chatwoot then shows a notice on the setup screen. During that time: - Numbers already on WhatsApp Cloud API can use manual setup. See Connect with WhatsApp Cloud API (manual setup). - Numbers using Coexistence cannot be connected until the restriction lifts. Something went wrong? See Connecting in Troubleshoot WhatsApp. It covers the most common errors you may see during this flow.
🔎 Advanced features explainedWildcard URL support in website live-chat campaigns
The website live-chat campaigns support wild card URL patterns. While building a URL pattern, consider the following behavior in mind. In Chatwoot, every URL pattern should start with http:// or https://. Running the campaign on the exact URL​ If you add an exact URL like https://chatwoot.com/app, then the URLs with trailing slashes or the URL params or the hash params would not match. Some examples for exact match definitions are as follows. - https://chatwoot.com/app would match https://chatwoot.com/app/ or https://chatwoot.com/app?test_param=1 - https://chatwoot.com/app?test_param=test_value would not match https://chatwoot.com/app or https://chatwoot.com/app#test_hash_param Running the campaign ignoring the URL parameters​ To ignore the URL params or hash params, you can add a trailing slash in the URL. For eg: https://chatwoot.com/app/ would match all the following URLs. - https://chatwoot.com/app/ - https://chatwoot.com/app - https://chatwoot.com/app/?test=1 - https://chatwoot.com/app/#test Running the campaign in all sub-directories​ You can use the * character in the URL if you want to match all the sub-directories. For eg: https://chatwoot.com/* would match to the following URLs - https://chatwoot.com/ - https://chatwoot.com/app - https://chatwoot.com/app/subdirectory Running the campaign in all subdomains​ To match the current domain and subdomains, you can use the pattern {*.}? in the URL. For eg: https://{*.}?chatwoot.com/ would match to the following URLs - https://chatwoot.com - https://app.chatwoot.com - https://www.chatwoot.com
âť“ Help CenterHow to setup an SSL certificate for your Help Center's custom domain?
Using your own domain, like docs.your-company.com, makes your help center feel more trustworthy and on-brand. Chatwoot allows you to use your own custom domain and would help you to secure your site with SSL certificates so that it's safe for your visitors. This guide walks you through setting up a custom domain for your Help Center portal in Chatwoot. Note: This guide is for Chatwoot Cloud users. If you're using the self-hosted version, you'll need to set up and manage the SSL certificate on your own. TLDR: Add your custom domain in Chatwoot portal settings, update your DNS with the CNAME Chatwoot provides, and we will issue the SSL certificate. Once it's ready, your Help Center will be live and accessible to your customers. Step 1: Set up your custom domain in portal settings Log in to your Chatwoot dashboard and go to the Help Center you want to connect with your custom domain. Click on Settings, then scroll to the Custom Domain section. Click the Add custom domain button to begin the setup. You'll now see a prompt asking for your custom domain. Enter the domain where you want your Help Center to be available (e.g., docs.yourdomain.com). This is the website address your customers will visit to access your documentation. Next, you'll be shown the DNS settings you need to add so we can confirm that the domain is yours and connect it to your Help Center. You’ll need to copy this information and update your DNS provider accordingly. If you’re not sure how to do it, you can use the option on the screen to email these details to your developer. Step 2: Update your DNS with the CNAME record You must point your custom domain to Chatwoot by creating a CNAME record. Host: docs Type: CNAME Value: chatwoot.help Instructions vary by DNS provider: Using Cloudflare: You can find the setting under the "DNS" tab. Note: Make sure that the SSL encryption mode is set to Full in Cloudflare (You can view this under SSL/TLS -> Overview). Using AWS Route 53: You can find the setting under the "Route53" service. If you're using a different DNS provider, the steps are generally the same. Look for the DNS settings section and add a CNAME record as described. If you’re unsure how to do this, just search for instructions specific to your provider using a phrase like How to add a CNAME record on [Your DNS Provider]. This step links your domain to Chatwoot’s servers. Once it’s done, we’ll have everything we need, your portal details and the domain configuration to issue the SSL certificate and make your Help Center live. Step 3: Getting an SSL certificate​ Chatwoot provides SSL certificates for all cloud customers on paid plans who set up a custom domain for their Help Center portal. This step happens automatically. Once you add the CNAME record to your DNS, our server will verify the domain and begin issuing the SSL certificate. This usually takes just a few minutes, but in some cases, depending on your DNS provider and how long they take to update records, it may take up to 24–48 hours. You can track the status of your SSL certificate right from the Chatwoot dashboard. Initially, you’ll see the status as Awaiting Verification. This means we’re still confirming your domain setup before the certificate is issued. If there are any issues during the SSL verification process like an incorrect CNAME record or DNS propagation delays, you’ll see an error message next to the status on your dashboard. Hover over the status indicator to view more details about what went wrong and what you need to fix. This helps you quickly identify and resolve any problems in the setup process. Once the verification is successful and the SSL certificate is issued, the status will change to 'Live' on your dashboard. This means your Help Center is now securely available at your custom domain. Your customers can visit the URL and browse the content.
🔎 Advanced features explainedHow to use Macros?
A macro is a set of sequential saved actions, like labeling a conversation, sending an email transcript, sending an attachment, etc., which you can define from your dashboard. As a support agent, you will find that you need to repeat the same set of actions often. Here is an example: Whenever you receive a demo request, you assign the Sales team, send a standard message on how to book a slot, add the Sales label, and snooze the conversation. Or, whenever you receive spam, you send the same message about how they've come to the wrong place, assign the Spam label, and close the conversation. Doing all these actions one-by-one, and multiple times a day can be painful and time-consuming. Instead, you can run a macro. This guide explains, with examples, how to create macros––personal or public––and how to use them. How to create a macro? Step 1. Go to Settings -> Macros -> "Add a new macro". Step 2. You'll see a macro setup screen. Here, you can create a flow of the actions that must be performed when this macro is executed. You can also name your macro for internal reference in the right sidebar. You can start by selecting an action from the dropdown. The currently available actions are shown below. Select an action and set it up accordingly. When done, continue adding more actions. An example setup of a macro Here is an example of the sequential actions performed whenever the Paper Layer team receives a query from a customer on the free plan. Please note that the order in which you set these actions defines the order in which they will be performed. Step 3. Set the visibility for your macro. If you are creating it for your personal use, set "Private". If you want your team to be able to use it, set the visibility to "Public." Step 4. Click the "Save macro" button on the bottom-right of the setup page. Your macro is now ready to use! How to execute a macro? Step 1. Locate the "Macros" section in the right sidebar of your chat window. Click the plus sign to expand it. This will show you the list of the macros created for your account – both private to you and public. Step 2. Preview the macro if you are unsure of the actions it would perform. To preview, click the "i" icon. It would pop up a preview of the actions set in the specific macro. Step 3. Execute the macro by clicking the play button. This would automatically perform all the actions in the defined sequence in a split second. You'll be able to see the respective success messages for different actions. Here's an example: How to edit or delete a macro? To edit or delete macros, open the list of macros by visiting Settings -> Macros. Find the specific macro and use the corresponding edit or delete button, as shown in the screenshot below.
🔎 Advanced features explainedHow to use pre-chat forms?
Pre chat form is used to collect information about a contact/conversation before initiating a conversation. The Pre chat form is available only in website live chat. How to add a pre-chat form? Step 1. Go to Settings → Inboxes. Click on the specific settings of a website inbox. Step 2. Go to the “Pre Chat Form” tab. There are two types of fields possible with the pre-chat form. 1. Standard fields: These are the primary contact fields––Email, Phone number, and Full name. 2. Custom fields: These are the fields that are created with custom attributes. The Pre chat form settings list down both the standard and custom fields. The columns in the settings of pre-chat forms are described below. - Key Field unique identifier - Type Type of the field (Text, List, Number, Date, Link, Boolean) - Required Is the field required or not - Label The label that will be displayed to the visitor on the widget - Placeholder The placeholder value All the fields would be displayed under the pre-chat form settings by default. The admin will be able to do the following. - Enable/disable fields - Change the order of fields - Update label/placeholder - Enable/Disable validation Customize your pre-chat form according to your needs. In order to add more fields, add more custom attributes. What does a pre-chat form look like? Once the pre-chat form is enabled, it would ask your customers to fill out a form like the one shown below when they start a conversation through live chat. Also, read: Pre chat form + Automations = 🚀