Web Chat Widget Integration

Embed the Bankify AI-powered chat widget on your website with our demo bot configuration

Widget Configuration

Demo Banking Bot (ID: 4)

Demo bot for testing chat widget integration

Demo

This demo uses bot ID 4 for testing purposes. Contact us for your production bot configuration.

Integration Code

https://your-domain.com/chat-embed?botId=4&color=%23e10600&position=bottom-right&autoOpen=false
<iframe 
  src="https://your-domain.com/chat-embed?botId=4&color=%23e10600&position=bottom-right&autoOpen=false"
  width="100%" 
  height="100%" 
  frameborder="0"
  style="position: fixed; bottom: 0; right: 0; width: 400px; height: 600px; z-index: 1000;">
</iframe>

Download a complete HTML page with the chat widget integrated and working example code.

Key Features

  • Demo bot configuration (botId: 4) for testing
  • Mobile number collection with WaProfile linking
  • AI-powered responses using existing WhatsApp bot logic
  • Customizable colors and positioning
  • Cross-origin iframe embedding support
  • Session-based conversation management

Live Preview

This preview shows how the chat widget will appear when embedded on your website using demo bot ID 4.

Implementation Notes

Demo Bot Configuration

This integration uses bot ID 4, which is configured specifically for demonstration purposes. For production use, you'll need your own bot configuration.

Mobile Number Collection

The widget will ask users for their mobile number in international format (263XXXXXXXXX) to link with existing customer profiles.

AI-Powered Responses

The chat widget uses the same Cloudflare AI service that powers our WhatsApp bot, providing intelligent responses for banking queries.

Cross-Origin Support

The widget is designed to work in iframes across different domains with proper X-Frame-Options configuration.

Customization Options

  • botId - Fixed to 4 for demo purposes
  • color - Primary color (hex format)
  • position - bottom-right or bottom-left
  • autoOpen - true/false for auto-opening

Next Steps

Ready to integrate the chat widget into your website? Follow these simple steps:

1

Test the Demo

Use the live preview above to test the chat widget functionality with our demo bot.

2

Download Example

Download the complete HTML example to see how the integration works in a real webpage.

3

Contact Us

Get in touch to receive your production bot configuration and start serving customers.