Adding an AI Chatbot to an Existing Website
* Actual cost, timeline, and scope vary by factors such as number of users, existing data conditions, and external system integrations.
This real estate leasing company was already operating its own property search website. However, staff members were spending a significant amount of time handling inquiries outside of business hours and answering frequently asked questions such as “How much are the initial costs?” and “How do I book a property viewing?” Reducing this operational burden had become a pressing issue.
To address this, they consulted us about introducing a system where an “Ask via Chat” icon remains constantly visible in the bottom-right corner of the screen without requiring major changes to the existing website design. When a user clicks the icon, a chat window opens, and an AI provides automated responses.
Proposal and Estimation Highlights
In this project, to minimize the cost of modifying the existing site, we proposed a widget-style chatbot that operates simply by embedding a single line of JavaScript tag.
We intentionally omitted building complex scenario branching or seamless handoffs to human operators. Instead, we focused entirely on a mechanism that allows the AI to read the company’s existing FAQ data (PDFs or Excel files) and provide initial answers through natural dialogue. For questions the AI cannot resolve, we provided a simple flow directing users to the existing inquiry form. By doing so, we reduced development hours and delivered the project within the budget and timeframe of ¥370,000 before tax and approximately 6 weeks.
Technical Configuration Innovations
| Item | Adopted Technology and Reason |
|---|---|
| Front End | Implemented as an independent widget using React to avoid affecting the existing site. |
| Back End & AI | Built a Retrieval-Augmented Generation (RAG) system using the OpenAI API to generate answers based on pre-loaded FAQ data. |
| Infrastructure | Adopted a serverless architecture to ensure stable operation even during traffic spikes. |
Deliverables and Feature Scope
The deliverables consist of three items: the “embed script” to add to the existing site, the “FAQ data administration screen” to update the data the AI learns from, and the “operational manual.”
The implemented features are as follows:
- Sticky Bottom-Right Icon and Chat Window: An interface that stays in the bottom right of the screen as the user scrolls and opens or closes with a click.
- AI Automated Response: A function that extracts appropriate information from registered FAQ data in response to users’ free-text questions and answers in natural sentences.
- Chat History Viewing (for Administrators): A simple viewing function that allows administrators to check what kind of questions are frequently asked.
Timeline and Delivery Process
We proceeded as an approximately 6-week project, securing sufficient time for adjusting the AI's response accuracy and conducting integration tests on the existing site.
| Phase | Timing | Work Completed and Client Participation |
|---|---|---|
| Step 1: Requirements Definition and FAQ Data Organization | Weeks 1–2 | We defined the role of the chatbot, and the client organized the existing FAQ data (Q&A lists and rulebooks) to be loaded. |
| Step 2: Chatbot UI Design and Prototype Creation | Week 3 | We designed the bottom-right icon and chat window UI, and the client reviewed a prototype running in the browser. |
| Step 3: AI Response Accuracy Tuning and Testing | Week 4 | We loaded the organized data into the AI and adjusted the response accuracy for anticipated questions. |
| Step 4: Integration Testing on the Existing Site | Week 5 | We embedded the script in the client's test environment (or a limited-access page) to verify that it displayed and operated correctly on the existing site. |
| Step 5: Delivery, Go-Live, and Payment | Week 6 | We placed the script on the production site, handed over the manual, and completed the delivery. We invoiced the full amount after acceptance. |
Payment Terms
As a general rule, we do not require an upfront payment. There was no advance payment at the time of contract; we invoiced the full amount only after all development work was completed and the client's acceptance was finalized.
Cost Breakdown
The following amounts include everything from requirements definition to chatbot UI implementation, AI integration, and integration testing on the existing site. Advanced human-handoff systems or complex customer database integrations are not included.
| Item | Cost Before Tax | Scope |
|---|---|---|
| Requirements Definition & Direction | ¥50,000 | Support for organizing FAQ data and defining UI specifications |
| Front-End Development | ¥80,000 | Implementation of the sticky icon and chat window UI |
| Back-End & AI Integration | ¥160,000 | FAQ data loading processes and AI answer-generation logic construction |
| Integration & Testing | ¥55,000 | Support for integration into the existing site and operational testing |
| Implementation Support | ¥25,000 | Creation of operational manuals, including guidance for FAQ data updates |
| Total | ¥370,000 | ¥407,000 including tax |
Currency Options for Quotations and Invoicing
In addition to Japanese yen (JPY), quotations and invoices can be issued in U.S. dollars (USD) or other currencies upon request. The applicable exchange rate, conversion basis, and any bank or payment-provider fees will be confirmed in advance for each project.
Supplement: Estimated Third-Party Service and Maintenance Costs After Launch
Because this system uses external AI models to generate answers, the following monthly costs are required after production launch, separate from the initial development fee.
| Category | Estimated Monthly Cost | Remarks |
|---|---|---|
| Third-Party Cloud Service & AI Charges (at cost) | Several thousand yen to approx. ¥10,000 | Usage fees for cloud infrastructure and AI (e.g., OpenAI API). These are pay-as-you-go based on access volume and number of conversations. |
| Minimum Maintenance and Operational Support | ¥10,000 to ¥20,000 | Includes system health monitoring and support for minor FAQ data updates. Major feature additions require a separate estimate. |
- The total monthly cost is estimated to be around ¥15,000 to ¥30,000 before tax.
- Third-party service charges may fluctuate depending on usage and exchange rates.
The costs for third-party cloud services are model estimates based on published pricing structures for common serverless platforms and AI models. [1] [2]
Staff Comment
When introducing a chatbot, aiming for an “AI that can answer any question perfectly” causes scenario design and data training costs to balloon endlessly. In this case, setting a realistic goal to “automate initial responses to frequently asked questions (FAQs) and halve staff’s phone and email handling time” was the key to success.
Therefore, we bypassed major renovations to the existing site and complex integrations with human chat systems, strictly adhering to a configuration that “just reads existing FAQ data and answers via a widget in the bottom right.” As a result, we were able to keep the initial cost down to ¥370,000 before tax while improving end users’ self-resolution rate.
Typical Scope for Common Add-Ons
Once operations are established, if a request arises to “allow human staff to take over the chat directly,” developing a human chat handoff function and an operator administration screen is a common next step. Because this requires building a real-time communication infrastructure and operator-status management features, it typically costs ¥500,000 to ¥800,000 before tax and takes about 1.5 to 2 months for additional development.
Starting with a small, reliable automation such as AI-powered responses, and then expanding to a human-supported system after assessing the implementation effects, is a highly effective investment approach for companies wanting to minimize initial investment risks.
How It Started