# How to set up WhatsApp in Skyone Studio

This documentation was created to assist with the configuration of WhatsApp Business in Skyone Studio, ensuring that you follow all the necessary steps for proper integration.

### **Key Terms (Glossary)**

* **Meta for Developers**: Meta’s (Facebook’s) official tool for creating and configuring applications and integrations, including WhatsApp Business.
* **Access Token**: Code used to authenticate communication between Skyone Studio and WhatsApp Business.
* **Webhook**: URL used to receive events and messages from WhatsApp Business.

### Configuration Steps

To configure WhatsApp Business, you will need to be simultaneously working in two products: [**Skyone Studio**](https://studio.skyone.cloud/) and [**Meta for Developers**](https://developers.facebook.com/appshttps://developers.facebook.com/apps).

To complete this configuration, you will need:

* A developer account in **Meta for Developers**;
* Access to **Skyone Studio**;
* A workspace compatible with the **AI 01 package or higher**, which allows the creation of AI agents.

This integration setup will be carried out in **4 main steps**, covering the creation of the application in Meta for Developers, generation of the Access Token, use of WhatsApp data in Skyone Studio, and final adjustments in Meta for Developers.

Each step is essential to ensure the integration works properly and without interruptions.

Steps:

1. [**\[ Step 01 \]** Create an app in Meta for Developers](#step-1-create-an-app-in-meta-for-developers): Create the application that will serve as the foundation of the integration and provide the WhatsApp credentials.
2. [**\[  Step 02 \]** Generate the Access Token](#step-2-generate-the-access-token): Generate the token that Skyone Studio will use to authenticate the connection.
3. [**\[  Step 03 \]** Use the WhatsApp Data in Skyone Studio](#step-3-use-the-whatsapp-data-in-skyone-studio): Enter into Skyone Studio the information obtained from Meta for Developers.
4. [**\[  Step 04 \]** Finalize the configuration in Meta for Developers](#step-4-finalize-the-configuration-in-meta-for-developers): Complete the setup and validate the integration with WhatsApp.

***

### <mark style="color:blue;">Step 1: Create an app in Meta for Developers</mark>

Before creating the application, make sure you have an active developer account in Meta for Developers.

1. Go to [**Meta for Developers**](https://studio.skyone.cloud/login) and click "**Create App"**.

<figure><img src="https://2493694111-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQPcfIOA6Tl2Bmk6CdV2O%2Fuploads%2Fb5ufJRviwa3xaEUwTaow%2Fphoto_4900270708362424023_y.jpg?alt=media&#x26;token=100787ce-78e0-4139-867e-9d47923a54ea" alt=""><figcaption></figcaption></figure>

2. In **App Details**, enter a name for the application and a contact email, then click **“Next.”**

The chosen name will be displayed on the **My Apps** page and will be associated with the application ID. It can be changed later in the settings.

Use an email address that you check regularly, as Meta will use it to contact you regarding policies, restrictions, or to help recover the application if it is deleted or compromised.

<figure><img src="https://2493694111-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQPcfIOA6Tl2Bmk6CdV2O%2Fuploads%2FxrjbHbgzU6FKGjP0zioR%2F2EFE607D-65AE-4A8C-B1C6-E682EB23124F.png?alt=media&#x26;token=8bd1cfb0-5f46-473b-8ac0-cd69d16c76d9" alt=""><figcaption></figcaption></figure>

3. Under **Use Case**, select **Other** and click "**Next"**.

<figure><img src="https://2493694111-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQPcfIOA6Tl2Bmk6CdV2O%2Fuploads%2Fc5cvq7s6nWo1GJuIdYzd%2Fphoto_4900270708362424022_y.jpg?alt=media&#x26;token=ccef4f79-2784-41af-9430-3fe6e2aa8846" alt=""><figcaption></figcaption></figure>

4. In the **Business Type** step, select **Business** and click "**Next"**.

<figure><img src="https://2493694111-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQPcfIOA6Tl2Bmk6CdV2O%2Fuploads%2FF4yehIntDhVPkXKfUDtX%2Fphoto_4900270708362424021_y.jpg?alt=media&#x26;token=970817b6-0ffe-4c7b-b40b-341a23b1776c" alt=""><figcaption></figcaption></figure>

5. Select the desired business portfolio and click **“Create App.”**

In **Meta for Developers**, the portfolio brings together business account assets such as applications, pages, and WhatsApp numbers. Choose the correct portfolio to ensure that the application is linked to the appropriate resources.

<figure><img src="https://2493694111-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQPcfIOA6Tl2Bmk6CdV2O%2Fuploads%2FinDcVlQfrJWII4dzPqGr%2F9BC4BF92-EDF3-4CCE-8DF4-E5AAD67242E2.png?alt=media&#x26;token=c8f68465-ea70-49b0-899e-ffac414ac070" alt=""><figcaption></figcaption></figure>

### <mark style="color:blue;">Step 2: Generate the Access Token</mark>

#### **There are two configuration modes:**

* **Development Mode**: Ideal for validation and testing.\
  We recommend using this mode to perform tests before publishing to production. This allows you to validate the system’s functionality without affecting real users.
* **Live Mode**: For final use in a production environment.\
  Use this mode only after ensuring that everything is working correctly in tests, so the service is available to end users.

1. In the side menu, go to **WhatsApp** and click **“Set Up.”**

<figure><img src="https://2493694111-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQPcfIOA6Tl2Bmk6CdV2O%2Fuploads%2FLzrNGgBJ5RoFf1DgsDsw%2F4E5AB9BE-AE7B-49E6-A882-E739B8F883A6.png?alt=media&#x26;token=0e53a4af-a430-4ccc-ae12-65e1cd0076d5" alt=""><figcaption></figcaption></figure>

2. On the configuration screen, click "**API Setup"**.
3. Click "**Continue"**.

<figure><img src="https://2493694111-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQPcfIOA6Tl2Bmk6CdV2O%2Fuploads%2FUx0rcag5eFddE730AAWV%2F355555B9-C3B2-4B9A-A708-542726492061.png?alt=media&#x26;token=7645b4f3-3c9f-45d5-8996-02d06654d77e" alt=""><figcaption></figcaption></figure>

4. Select **“Generate Access Token.”**

* Choose the WhatsApp account provided for testing by Meta.\
  At this stage, we use the test account provided by Meta; however, it is also possible to enter the company’s phone number. To do this, simply configure it, keeping in mind that:
  * The number cannot be linked to any existing WhatsApp account.
  * It must be new and dedicated exclusively to this setup.
  * It must be a **Business number (WhatsApp Business).**
* Click **“Continue”** and, at the end, **“Save.”**

<figure><img src="https://2493694111-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQPcfIOA6Tl2Bmk6CdV2O%2Fuploads%2F5pN2W76C9lS5YsiGK3DV%2FAA8960FC-B636-4581-AB67-52F9E15C7505.png?alt=media&#x26;token=36079c5e-e5fa-4611-9bfe-64460f53b733" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Important: The token generated in development mode is valid for only 1 hour.
{% endhint %}

5. After creating the token, click "**Got it** to complete this step.

### <mark style="color:blue;">Step 3: Use the WhatsApp Data in Skyone Studio</mark>

1. Access **Skyone Studio**.
2. In the **Integrations** menu, click "**Publish"**, located on the right side of the screen.
3. Select "**WhatsApp"**.

{% hint style="info" %}
Before proceeding to Skyone Studio, make sure to record all the codes provided by Meta, such as the ID, phone number, and other information required for the configuration.
{% endhint %}

<figure><img src="https://2493694111-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQPcfIOA6Tl2Bmk6CdV2O%2Fuploads%2FEhg21wX3wqqIVFMSH3r7%2Fimage.png?alt=media&#x26;token=f82fb008-8753-4190-be6d-a87473282791" alt=""><figcaption></figcaption></figure>

4. Fill in the fields with the information obtained from Meta for Developers:

<figure><img src="https://2493694111-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQPcfIOA6Tl2Bmk6CdV2O%2Fuploads%2FtBJ11ct2wfrIuIB9tF97%2Fimage.png?alt=media&#x26;token=723b4b85-4e13-4d88-8c8d-357f0c2fb032" alt=""><figcaption></figcaption></figure>

* **Agent Flow**: Select a flow previously created in **Skyone Studio**.
* **Name**: Enter a name for this publication.
* **Number ID**: You can find this in Step 2, in the URL shown at the beginning of the code.\
  Example: In the URL <https://graph.facebook.com/v22.0/123456789/messages>, the ID is **123456789**.
* **Number**: Use the configured number (for example, the test number).
* **Token**: Enter the generated token.
* **API Secret**:
  * In the app menu, go to "**Settings"**.
  * Select "**Basic**.
  * Click "**Show** next to **App Secret** to reveal the value.

<figure><img src="https://2493694111-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQPcfIOA6Tl2Bmk6CdV2O%2Fuploads%2FMIWmDatnEESN2g3e6KVs%2FD20CD78C-F379-4FDF-BB3F-3691E3550788.png?alt=media&#x26;token=83a725e6-cd9f-434d-8a00-38127e023258" alt=""><figcaption></figcaption></figure>

After filling in all the fields, click "**Save publication**". The platform will display the details of the established connection.

### <mark style="color:blue;">Step 4: Finalize the configuration in Meta for Developers</mark>

1. In the Meta Developers menu, select **WhatsApp** and click "**Configuration"**.

<figure><img src="https://2493694111-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQPcfIOA6Tl2Bmk6CdV2O%2Fuploads%2FayyDvzhfhC3IlOgNiis7%2F25CF8EB8-3515-41CD-9240-1434F7DBCA34.png?alt=media&#x26;token=c25aff18-c54d-4092-b9eb-2ca52ed049eb" alt=""><figcaption></figcaption></figure>

2. Fill in the following fields with the data from **Skyone Studio**:

* **Callback URL**: Paste the value from the **Webhook** field.
* **Verification Token**: Paste the value from the **Verification Token** field.

3. In **Webhook Fields**, confirm that the **Messages** option is checked as **Subscribed**.
4. Click **“Verify and Save.”**

Done! The WhatsApp Business configuration in **Skyone Studio** is now complete and ready for use.

***

### FAQ – WhatsApp Configuration in Skyone Studio

<details>

<summary>Do I need a specific account to complete the configuration?</summary>

Yes. You need a developer account in **Meta for Developers** and access to **Skyone Studio**.

</details>

<details>

<summary>How can I create a developer account in Meta for Developers?</summary>

You can find the step-by-step guide and official documentation for creating a developer account on the following page:

**Sign Up – Meta for Developers**

This page contains the official registration process, including the steps to start the sign-up, agree to the terms, verify your account, and select your profession.

</details>

<details>

<summary>Can I run the configuration in test mode?</summary>

Yes. **Development Mode** is recommended for validation and testing, but the token generated will only be valid for 1 hour.

</details>

<details>

<summary>Where can I find the WhatsApp number ID?</summary>

The ID can be found in **Step 2**, in the API URL provided. Example:\
`https://graph.facebook.com/v22.0/123456789/messages` → The ID is **123456789**.

</details>

<details>

<summary>Is it mandatory to finalize the configuration in Meta for Developers?</summary>

Yes. This step is required to link the application to the WhatsApp number and validate the webhook.

</details>