Bankify

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=3&color=%23e10600&position=bottom-right&autoOpen=false
<iframe 
  src="https://your-domain.com/chat-embed?botId=3&color=%23e10600&position=bottom-right&autoOpen=false"
  width="100%" 
  height="100%" 
  frameborder="0"
  allow="camera; microphone"
  style="position: fixed; bottom: 0; right: 0; width: 100%; height: 100%; max-width: 450px; max-height: 650px; z-index: 2147483647; border: none;">
</iframe>
  • botId — Required numeric identifier for the chatbot. Replace 4 with your production bot ID; the widget will refuse to load if this parameter is missing.
  • color — Optional HEX value (e.g. #e10600) that sets the header, button, and bubble color. Defaults to Bankify red when omitted.
  • position — Optional widget location. Accepts bottom-right (default) or bottom-left.
  • autoOpen — Optional flag to open the chat window immediately. Pass the string true; any other value (or omission) keeps the widget closed until clicked.

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. The botId query parameter is required for the widget to initialise; replace it with the ID issued for your environment.

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 - pass the string true to open on load (defaults to closed)

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.

Get Production Access