Cara Guna Voiceflow AI untuk Bina Chatbot 2026

nn

Kalau anda pernah terfikir nak bina chatbot untuk website atau apl suara untuk Alexa dan Google Assistant, Voiceflow adalah platform yang paling sesuai. Ia direka khas untuk pembina yang nak design pengalaman perbualan — sama ada teks mahupun suara.

n

n

Pendedahan: Artikel ini mengandungi pautan affiliate. Jika anda mendaftar melalui pautan kami, kami mungkin menerima komisyen kecil — tanpa sebarang kos tambahan kepada anda. Ini membantu kami terus menghasilkan panduan percuma dalam Bahasa Melayu.

n

nnn

Dalam panduan ini, anda akan belajar cara guna Voiceflow dari awal: dari setup akaun, bina flow pertama, sampai deploy ke berbagai platform.

nn

nnnn

Apa Itu Voiceflow?

nnVoiceflow adalah platform visual design tool untuk bina agen perbualan berbasis AI — termasuk chatbot teks dan voice applications. Ia amat popular di kalangan:nn

n
• UX Designer: Reka prototaip pengalaman perbualan

n

• Product Manager: Bina chatbot tanpa bergantung pada developer

n

• Developer: Kolaborasi dengan team reka bentuk

n

• Syarikat: Deploy customer support bot berskala besar

n

nn

Voiceflow vs Platform Lain

nn

| Platform | Fokus | Kemahiran Diperlukan |

n

|----------|-------|---------------------|

n

| Voiceflow | Multi-modal (teks + suara) | Visual, no-code |

n

| Botpress | Open source, developer-friendly | Sederhana |

n

| Chatfuel | Facebook/Instagram | No-code |

n

| Dialogflow | NLU enterprise | Teknikal |

nn

Voiceflow unggul dalam design experience — canvas-nya sangat intuitif dan sesuai untuk kolaborasi pasukan.

nn

nn

Langkah 1: Daftar Akaun Voiceflow

nn

Cara Mulakan

nn

n
1. Pergi ke voiceflow.com

n

2. Klik "Start Building Free"

n

3. Daftar dengan email, Google, atau GitHub

n

4. Sahkan akaun anda

n

5. Pilih template atau mulakan projek baharu

n

nn

Pelan Harga Voiceflow

nn

| Pelan | Harga | Ciri Utama |

n

|-------|-------|------------|

n

| Sandbox | Percuma | 2 editor, 5 projek, komuniti support |

n

| Basic | $40/bulan | 2 editor, unlimited projek |

n

| Pro | $125/bulan | 5 editor, analytics lanjutan |

n

| Enterprise | Custom | Unlimited + dedicated support |

nn

Plan percuma (Sandbox) sudah cukup untuk belajar dan projek kecil.

nn

nnnn

Langkah 2: Kenali Antara Muka Voiceflow

nn

Selepas buka projek, anda akan nampak Canvas — kawasan kerja utama Voiceflow.

nn

Bahagian Utama Antara Muka

nnToolbar Atas:n

n
• Nama projek

n

• Butang Undo/Redo

n

• Test button

n

• Share/Publish button

n

nnPanel Kiri — Komponen:n

n
• Semua jenis block yang boleh anda tambah

n

• Assets (gambar, audio, variable)

n

• Knowledge Base

n

nnCanvas Utama:n

n
• Di sinilah anda drag, drop, dan sambungkan blocks

n

• Zoom in/out untuk lihat keseluruhan flow

n

nnPanel Kanan — Properties:n

n
• Konfigurasi block yang sedang dipilih

n

nn

nn

Langkah 3: Memahami Blocks dalam Voiceflow

nnBlock adalah unit asas dalam Voiceflow. Setiap block melakukan fungsi tertentu dalam perbualan.nn

Kategori Block

nn

Speak/Text

n

n
• Speak: Bot cakap atau hantar mesej teks

n

• Text: Khusus untuk text channels (tidak ada TTS)

n

• Visual: Tunjuk gambar atau kad produk

n

nn

Capture/Input

nnnn

n
• Choice: Pengguna pilih dari beberapa pilihan

n

• Capture: Simpan input pengguna ke variable

n

• Button: Butang clickable

n

• Card Carousel: Scroll gallery pilihan

n

nn

Logic

n

n
• If/Else: Buat keputusan berdasarkan syarat

n

• Set Variable: Simpan atau ubah nilai variable

n

• Random: Pilih response secara rawak

n

nn

AI

n

n
• AI Response: Jana jawapan AI berdasarkan Knowledge Base

n

• AI Set Variable: Ekstrak maklumat dari mesej pengguna

n

• Intent: Detect niat pengguna

n

nn

Integration

n

n
• API: Panggil API luar

n

• Code: Jalankan JavaScript custom

n

• Integrations: Sambung ke perkhidmatan lain

n

nn

nn

Langkah 4: Bina Chatbot Pertama Anda

nn

Mari bina chatbot customer support yang mudah untuk website bisnes.

nn

Step 1: Tambah Start Block

nn

Setiap flow bermula dari Start Block. Ia sudah ada secara default.

nn

Step 2: Buat Ucapan Selamat

nn

n
1. Drag "Speak" block ke canvas

n

2. Sambungkan dari Start → Speak

n

3. Taip mesej: "Helo! Selamat datang ke Kedai Kami! Saya Aria, pembantu digital anda. Apa yang boleh saya bantu hari ini?"

n

4. Klik luar block untuk simpan

n

nn

Step 3: Buat Menu Pilihan

nn

n
1. Drag "Choice" block

n

2. Sambungkan dari Speak → Choice

n

3. Tambah pilihan:

n

n

- "Tanya Harga Produk"

n

- "Status Penghantaran"

n

- "Hubungi Support"

n

- "Tentang Kami"

n

n
1. Setiap pilihan akan ada port output untuk disambungkan ke flow seterusnya

n

nn

Step 4: Bina Setiap Cabang

nn

Untuk setiap pilihan, buat flow berkaitan. Contoh untuk "Tanya Harga Produk":

n

n
1. Drag Speak block: "Boleh kongsikan nama produk yang anda berminat?"

n

2. Drag Capture block: Simpan ke variable `{namaProduct}`

n

3. Drag AI Response block: Cari jawapan dari Knowledge Base

n

4. Drag Speak block: Tunjukkan hasil

n

nn

nn

Langkah 5: Setup AI dalam Voiceflow

nn

Voiceflow ada Knowledge Base yang membolehkan chatbot anda jawab soalan berdasarkan dokumen yang anda sediakan.

nn

Cara Setup Knowledge Base

nn

n
1. Klik ikon "Knowledge Base" di panel kiri

n

2. Klik "Add Source"

n

3. Pilih jenis sumber:

n

n

- Upload file: PDF, Word, TXT, CSV

n

- Paste text: Teks terus

n

- URL: Crawl halaman web

n

n
1. Upload atau masukkan kandungan anda

n

2. Tunggu proses indexing selesai

n

nn

Contoh Kandungan untuk Knowledge Base

nn

Untuk bisnes kedai online, masukkan:

n

n
• Senarai produk dengan harga dan deskripsi

n

• FAQ (Soalan Lazim) pelanggan

n

• Polisi penghantaran dan pemulangan

n

• Cara penjagaan produk

n

• Maklumat syarikat dan hubungi

n

nn

Guna AI Response Block

nn

Setelah KB disediakan:

n

n
1. Drag "AI Response" block ke canvas

n

2. Di properties panel kanan, pilih KB anda

n

3. Set system prompt: "Anda adalah pembantu pelanggan [Nama Syarikat]. Jawab soalan berdasarkan maklumat yang ada. Jika tidak pasti, minta pelanggan hubungi support."

n

4. Sambungkan ke output block

n

nn

nn

Langkah 6: Bina Voice App untuk Alexa

nn

Satu keunikan Voiceflow — ia direka dari awal untuk voice interfaces macam Amazon Alexa dan Google Assistant.

nn

Perbezaan Voice vs Chat

nn

Dalam voice apps:

n

n
• Pengguna cakap, bukan taip

n

• Respons mestilah pendek dan jelas

n

• Tiada butang atau visual — semua melalui suara

n

• Penting untuk confirm apa yang didengar

n

nn

Cara Bina Alexa Skill

nn

n
1. Buat projek baru, pilih platform "Alexa"

n

2. Voiceflow akan tunjukkan template Alexa-specific

n

3. Guna Speak block (bukannya Text)

n

4. Tambah SSML untuk kawalan suara:

n

nn

nn

Helo! Selamat datang.

nn

Nak tanya apa hari ini?

nn

nn

n
1. Deploy ke Alexa Developer Console

n

nn

SSML Tags yang Berguna

nn

| Tag | Fungsi | Contoh |

n

|-----|--------|--------|

n

| `` | Jeda | `` |

n

| `` | Penekanan | `penting` |

n

| `` | Kelajuan | `...` |

n

| `` | Format tarikh | Baca sebagai tarikh |

nn

nn

Langkah 7: Multi-Modal AI — Teks + Imej + Suara

nn

Voiceflow kini support multi-modal interactions:

nn

Visual Cards

nn

Tunjukkan maklumat dalam bentuk kad yang menarik:

n

n
1. Drag "Card" block

n

2. Tambah gambar, tajuk, deskripsi

n

3. Tambah butang CTA (Call-to-Action)

n

nn

Sesuai untuk tunjukkan:

n

n
• Produk dengan gambar dan harga

n

• Lokasi dengan peta

n

• Profil dengan foto

n

nn

Carousel

nn

Untuk beberapa pilihan produk sekaligus:

n

n
1. Drag "Carousel" block

n

2. Tambah beberapa kad

n

3. Pengguna boleh scroll dan pilih

n

nn

Audio dalam Voice Apps

nn

Untuk Alexa/Google:

n

n
1. Upload fail audio (MP3/OGG)

n

2. Tambah ke Assets

n

3. Guna dalam Speak block: `

n

nn

nn

Langkah 8: Customer Support Bot — Kes Guna Sebenar

nn

Mari bina customer support bot yang lebih lengkap:

nn

Arkitektur Bot Support

nn

n

[Start]

n

↓

n

[Salam + Tanya nama]

n

↓

n

[Main Menu]

n

├── Soalan Produk → [KB Lookup] → [AI Response]

n

├── Status Order → [Capture Order ID] → [API Call] → [Reply]

n

├── Aduan → [Capture Details] → [Ticket Creation] → [Acknowledgement]

n

└── Chat dengan Ejen → [Human Handoff]

n

nn

Integrasi dengan Sistem Tiket

nn

Voiceflow boleh integrate dengan platform support melalui API:

nnContoh: Cipta tiket di Freshdesknn

n
1. Drag "API" block

n

2. Method: POST

n

3. URL: `https://yourdomain.freshdesk.com/api/v2/tickets`

n

4. Headers: Authorization (API key)

n

5. Body:

n

n

n

{

n

"subject": "{ticketSubject}",

n

"description": "{userIssue}",

n

"email": "{userEmail}",

n

"priority": 2,

n

"status": 2

n

}

n

nn

Human Handoff

nn

Bila bot tak dapat bantu:

n

n
1. Gunakan Integrations → Live Chat

n

2. Pilih platform (Intercom, Zendesk, dll.)

n

3. Bot akan transfer perbualan kepada ejen

n

4. Ejen dapat full history perbualan

n

nn

nn

Langkah 9: Deploy dan Publish

nn

Deploy ke Website

nn

n
1. Klik "Publish" di toolbar atas

n

2. Pilih "Web"

n

3. Customize widget:

n

n

- Warna tema

n

- Logo

n

- Salam pembuka

n

- Kedudukan widget

n

n
1. Copy kod embed

n

nn

nn

import { Assistant } from 'https://cdn.voiceflow.com/webchat/bundle.mjs';

nn

Assistant.launch({

n

verify: { projectID: 'YOUR_PROJECT_ID' },

n

url: 'https://general-runtime.voiceflow.com',

n

versionID: 'production'

n

});

nn

nn

Deploy ke API

nn

Untuk integrasi lebih fleksibel, guna Voiceflow Dialog API:

nn

n

import requests

nn

response = requests.post(

n

'https://general-runtime.voiceflow.com/state/user/YOUR_USER_ID/interact',

n

headers={

n

'Authorization': 'YOUR_API_KEY',

n

'Content-Type': 'application/json'

n

},

n

json={

n

'action': {

n

'type': 'text',

n

'payload': 'Helo, saya nak tanya pasal harga'

n

}

n

}

n

)

nn

traces = response.json()

n

for trace in traces:

n

if trace['type'] == 'speak':

n

print(trace['payload']['message'])

n

nn

nn

Tips Lanjutan untuk Voiceflow Pro

nn

Guna Variables dengan Bijak

nn

Variables menyimpan maklumat sepanjang perbualan:

n

n
• `{userName}` — Nama pengguna

n

• `{orderID}` — Nombor pesanan

n

• `{sessionCount}` — Kali ke-berapa pengguna chat

n

nn

Akses dalam blocks: `{variableName}`

nn

Collaboration Features

nn

Untuk pasukan:

n

n
• Comments: Tinggalkan nota pada blocks

n

• Share: Jemput team member dengan level akses berbeza

n

• Version History: Rollback ke versi sebelumnya

n

• Prototype Sharing: Share link untuk preview tanpa account

n

nn

A/B Testing

nn

Test variasi respons:

n

n
1. Guna Random block

n

2. Set 50% → Versi A, 50% → Versi B

n

3. Monitor analytics untuk kesan mana lebih berkesan

n

nn

nn

Kesimpulan

nnVoiceflow AI adalah platform terbaik untuk sesiapa yang nak bina pengalaman perbualan yang polished — dari chatbot website mudah hinggalah voice apps Alexa yang kompleks. Kekuatan terbesarnya adalah visual canvas yang intuitif, sokongan multi-modal, dan Knowledge Base AI yang mudah disediakan.nn

Bagi bisnes yang nak bina customer support bot atau sales assistant, Voiceflow membolehkan anda dari concept hingga deployment dalam masa satu hari — tanpa perlu tulis kod langsung.

nn

Cuba Voiceflow hari ini dengan plan percuma dan bina chatbot pertama anda dalam masa 30 minit!

nn

nn

Sumber Berguna

nn

n
• Laman rasmi Voiceflow — Platform visual builder untuk chatbot dan voice apps

n

nn

n

n

Artikel Berkaitan

n

• Cara Guna ChatGPT — Panduan Lengkap Malaysia
• Cara Guna Claude AI di Malaysia
• Cara Guna Google Gemini — Panduan Terkini
• Cara Guna ChatGPT Malaysia 2026 — Panduan Lengkap
• Cara Guna Gemini AI Malaysia 2026 — Panduan Lengkap

n

Rujukan

n

n
• MDEC — Ekonomi Digital Malaysia

n

• BERNAMA — Berita Teknologi & AI Malaysia

n

• SME Corp Malaysia — Panduan Digitalisasi PKS

n

n

Artikel Berkaitan

nn

n
• Cara Guna Botpress AI untuk Bina Chatbot

n

• Cara Guna Chatfuel AI untuk Chatbot Facebook

n

• Cara Guna Tidio AI Chatbot untuk E-commerce

n

• Cara Guna Intercom AI untuk Sokongan Pelanggan

n

• Cara Guna Freshdesk AI untuk Pelanggan

n

• Cara Guna OpenAI API untuk Projek AI

n

• Cara Guna Make.com untuk Automasi Workflow

n

• Cara Guna n8n untuk Automasi Bisnes

n