---
description: >-
  Langkah-langkah mengkoneksikan Bot AI kamu ke Landing Page atau Website, untuk
  keperluan (Bot Chat)
---

# Web Chatbot

1. **Klik Menu Connected Platforms, Lalu Klik Web Chatbot dan Klik Connect**

<figure><img src="https://3109115916-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1Iwvki3cg28ovGuNQxGI%2Fuploads%2Fm1dq5GqwozzcNkUFFYJZ%2F1000404214.jpg?alt=media&#x26;token=fd1e30f2-7454-4643-9696-bb81f61c73f3" alt=""><figcaption></figcaption></figure>

2. **Buat Webchatmu**

<figure><img src="https://3109115916-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1Iwvki3cg28ovGuNQxGI%2Fuploads%2FThhr59oXaYkc5NwnBlSG%2F1000404361.jpg?alt=media&#x26;token=15ddc05a-ecfc-4301-bfcd-c19ad51aa7e6" alt=""><figcaption></figcaption></figure>

3. Tambahkan **domain** atau **subdomain** di **Authorized websites**. Web chatbot hanya akan tampil di situs yang kamu tambahkan.

<figure><img src="https://3109115916-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1Iwvki3cg28ovGuNQxGI%2Fuploads%2FFniI3CR7NG8wTw5RmNoJ%2F1000404368.jpg?alt=media&#x26;token=80e40be7-a851-4af9-9bb5-d2c4c44955be" alt=""><figcaption></figcaption></figure>

* **Name**: Nama file kamu, untuk membedakan dengan file web chatbot lainnya \*Wajib
* **Welcome Message**: Ini adalah pesan pertama yang akan diterima pengguna dari Bot Anda \*Opsional
* **Authorized websites**: Domain atau subdomain yang kamu izinkan untuk menampilkan chatbot  \*Opsional
* **Conversation Starters**: Pembuka Percakapan menyediakan cara bagi pengguna untuk memulai percakapan dengan bisnis Anda dengan daftar pertanyaan yang sering diajukan \*Opsional
* **Persistent Menu**: Menu dapat dikonfigurasi untuk membantu pengguna menemukan dan mengakses fitur Bot Anda dengan lebih mudah. ​​Menu selalu tersedia bagi pengguna. Menu ini harus berisi tindakan tingkat atas yang dapat digunakan pengguna kapan saja. Memiliki menu dengan mudah mengomunikasikan kemampuan dasar bot Anda untuk pengguna pemula dan pengguna lama \*Opsional

**More Options**

* **Template:** Pilih template chatbot kamu \*Opsional
* **Brand Color:** Pilih Warna yang sesuai dengan brand kamu \*Opsional
* **Customize webchat with CSS:** Tampilan chatbotnya masih belum sesuai dengan keinginan kamu? silahkan tambahkan cssnya \*Opsional



| **Option Name** | **Possible Values**/**Description**                                                                                                                                              | **Default**                                                           |
| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------- |
| type            | <p>floating/window/container<br><em>container</em>: include the chatbot inside any HTML element<br><em>window</em>: the chatbot will open on a new window</p>                    | floating                                                              |
| element         | Only used if “type” is “container”. example “#div1”                                                                                                                              |                                                                       |
| headerTitle     | The title that is shown on the header of the webchat                                                                                                                             | Account Name                                                          |
| color           | any color name or color code                                                                                                                                                     | #007BFF                                                               |
| hideHeader      | <p>Hide the session that contains the business name<br>true/false</p>                                                                                                            | false                                                                 |
| ref             | <p>any ref/flow/step ID to be sent automatically<br>once the user clicks on the chat ICON.<br><br>Set ref as “get_started_button” to automatically<br>send the Welcome flow.</p> |                                                                       |
| showPersona     | true/false                                                                                                                                                                       | false                                                                 |
| hideComposer    | true/false                                                                                                                                                                       | false                                                                 |
| template        | template1/template2                                                                                                                                                              |                                                                       |
| icon            | the chat icon that shows on the bottom \| right                                                                                                                                  |                                                                       |
| right           | Distance of the icon from the left edge of the screen                                                                                                                            | 20px                                                                  |
| bottom          | Distance of the icon from the bottom edge of the screen                                                                                                                          | 20px                                                                  |
| loadMessages    | Load past conversations with the contact when webchat is opened. true/false                                                                                                      | true                                                                  |
| setCustomFields | <p>Allow to set multiple custom fields.<br>id: Custom Field ID<br>You can use a system field name as ID: email, phone, full_name, first_name,last_name<br></p>                   | \[{id:”email”, value:”…@gmail.com”}, {id:348574, value:”Value here”}] |



4. **Setelah membuat Web chatbot kamu, lalu klik 3 titik dan dapatkan kodenya.**

<figure><img src="https://3109115916-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1Iwvki3cg28ovGuNQxGI%2Fuploads%2FnGVvaCEq52DAdpgk1qFQ%2F1000404390.jpg?alt=media&#x26;token=449a4ed4-b625-4279-b309-2bb4e8a98404" alt=""><figcaption></figcaption></figure>

5. **Setelah mendapatkan codenya, kamu pasang pada header website atau landing page kamu**
