Connecting Your WhatsApp Number

Before proceeding, please ensure you have the following ready to successfully connect your WhatsApp account:

  • A Phone Number: You need a phone number to connect. This number must not be registered on any existing WhatsApp account. If it is currently on WhatsApp or WhatsApp Business, you must delete the WhatsApp account associated with that number first.
  • Business Website: You need a valid website. While connecting, Meta will ask for your website and you must enter a display name that strictly matches the name mentioned on your website. Failing to do so can lead to your WhatsApp account being banned.
  • Business Registration: You need a registered business. After connecting the number, you need to verify your Meta Business Portfolio. This is important to ensure your WhatsApp display name is shown to users instead of just your phone number.
  • Running Ads? If you already run Meta ads, you likely have a Business Portfolio created. You can select this existing portfolio while connecting. You can also connect this WhatsApp number as a call-to-action (CTA) button on your ads.

Follow these steps to connect your WhatsApp number to TailorTalk Agent.

Step 1: Navigate to WhatsApp Integration

  1. Go to the Agent Page in your TailorTalk dashboard.
  2. Click on the Add Channels integration option.
  3. Select Whatsapp Channel.
whatsapp integration

Step 2: Register Your WhatsApp Number

  1. Click on the Register your number button.
  2. A new window will open where you will be guided to link your WhatsApp number to the Cloud API through TailorTalk.
  3. Complete the registration process as instructed in the window as follows.

Click on Get Started

text

Log in using your Facebook account

text

Choose an existing business portfolio or create a new one. Provide the necessary details, such as the business name, website, and other relevant information. Ensure that the business name matches your legal business name for consistency. Then click on next.

text

Now it's time to create a Cloud WhatsApp account. Create a new WhatsApp account and click Next to proceed.

text

Fill in the WhatsApp information, including your WhatsApp Business Account Name and Display Name. Ensure the Display Name matches the name on your website (e.g., if your company name is TailorTalk, use "TailorTalk" as the Display Name). Also, provide your website details, and then click 'Next' to continue.

text
text

Now enter your WhatsApp number. Ensure that this number is not already registered on the WhatsApp app.

text

Enter OTP and click next

text

Click on Finish to complete the setup. If you wish to send outbound messages, click on Add Payment Method and complete the payment setup.

text

Confirmation

Once connected, your TailorTalk agent will be able to communicate with customers via WhatsApp using the registered number.

By following these steps, you ensure a smooth integration process, allowing your AI agent to handle WhatsApp conversations seamlessly.

text

Accessing your whatsapp account

Go to this link to access your WhatsApp number settings. Here, you can upload a profile picture, update the description, and change other settings.

Integrating the WhatsApp Widget

Follow these steps to add the WhatsApp Widget to your website and customize its appearance and behavior.

Step 1: Navigate to WhatsApp Integration

  1. Go to the Agent Page in your TailorTalk dashboard.
  2. Click the top-right menu on Whatsapp channel.
  3. select Generate widget.
WhatsApp integration

Step 2: Customize and Test

Please enter your preferred settings and information and test the widget within it.

Widget Configuration

Widget Parameters

Parameter Type Default Description Required
Position string Bottom-right Position of the widget on the screen. Yes
buttonText string Chat with us Text displayed on the widget button. Yes
welcomeMessage string (default message) Welcome message shown to users. No

Step 3: Save & Generate Code

  1. Click Generate Code.
  2. Choose your Integration method (e.g., HTML, React, etc.).
  3. Copy the generated code snippet.
Widget code

Step 4: Add the Widget Code to Your Website

Choose your integration method and add the code as follows:

  • HTML Website:
    Paste the code just before the closing </body> tag in your main HTML file (e.g., index.html).

  • React Application:
    Place the code inside a useLayoutEffect (or useEffect) in your main component (e.g., App.js).
    You can also create a dedicated component for the widget.

  • Next.js Application:
    Use the code in your main layout or page file.
    Make sure to import next/script as Script.

XLinkedIn