QuData - User contributions [en]

Tutorial on creating a website using AI-Agent

2026-06-29T13:52:39Z

Slavinsky: Category:Practical AI Solutions

[[Category:Practical AI Solutions]]

== Description ==
This article details the practical experience of developing a web project from scratch using AI agent, based on the creation of the Bitva gaming portal.

'''Bitva''' is a free online game aggregator that provides users with instant access to thousands of browser-based games without the need for downloads or registration.

Architecturally, the project was designed to be incredibly lightweight and fast, running on a pure PHP and SQLite stack without the overhead of heavy frameworks.

'''The main goal of this guide''' is to demonstrate a step-by-step algorithm for interacting with artificial intelligence, from writing the initial technical specifications to generating the final code. The methodology described here is highly versatile and will help both clients and developers build an efficient process for managing AI agents across projects of varying complexity.

== Tech Stack Selection ==
First, it is necessary to select and approve the technologies that will be used for project development:
* Programming language (preferably with the version specified from the start)
* Framework (if required)
* DBMS (if the use of a database is required)
In the case of Bitva, which is described in this tutorial, PHP 7.2 without any frameworks and SQLite were chosen.

== Human-Readable Specs ==
Next, it is necessary to create a specification document that is easy and convenient to navigate.

In the case of Bitva, the specification was divided into 2 parts - '''"Design"''' and '''"Logic and Mechanics"'''.

=== Design ===
The "Design" section separately describes each page/element and its visual behavior.

For example, the "Design" section for Bitva describes:
* The appearance of the main page
* The appearance of Category and Tag pages
* Navigation
* The appearance of the game page
It is also necessary to create mockup images for all pages/elements. This will help both when describing the interface in text and when creating specifications for the AI Agent later.

If there are examples of interfaces from other similar websites, AI can be used to create a detailed and understandable description of the page design. If mockup images already exist at the interface description stage, they can also be provided.

In the case of Bitva, Gemini (Pro 3.1) was used to describe some interface elements (navigation, part of the main page) based on example screenshots. However, it definitely will not describe an interface perfectly from a screenshot, because it will add details that are unnecessary or incorrectly describe the actual requirements. Therefore, a specification generated by Gemini should be considered a framework that can be used as a starting point to save time, but the entire text must still be reviewed and edited manually.

=== Logic and Mechanics ===
The "Logic and Mechanics" section describes the main processes of the website. The behavior of pages and all functionality must be described in clear and understandable language.

For Bitva, the "Logic and Mechanics" section was divided into the following parts:
* Categories/Tags/Collections (complete behavior of pages and their elements)
* Game Import (logic for importing game data from supplier JSON files)
** Supplier 1 integration
** Supplier 2 integration
* Images (logic for saving, naming, and compressing images)
* Logic for assigning Categories and Tags

=== Creating the Database Schema ===
It is also necessary to create a database schema (or a skeleton data structure if a database is not being used).

After the specification and database schema have been approved, it is possible to proceed to creating instructions for the AI Agent.

== AI Agent Instructions file ==
Having a clearly described specification for yourself and the team, the next step is to create an instruction file for the AI Agent. This is a .md file that will be located in the project root, and the agent will always take its contents into account during any code generation.

It is important to describe the project in as much detail as possible, clarifying all nuances that the Agent might otherwise assume or misunderstand.

It is better to write the project description in the instruction file in English so that the Agent does not have any issues understanding the language.

An LLM will be needed to create a detailed and complete description. In the case of Bitva, Gemini was used.

Asking an LLM to create such a file directly from the specification is not effective. Therefore, the process is divided into steps.

=== Creating the General File Framework ===
First, the complete specification and data structure created in the previous step should be provided to the LLM. It is necessary to explain the situation: that we are going to work with an AI Agent and need to create a .md file containing complete instructions that will be taken into account by the Agent during development. The goal is to create a description that will be perfectly understandable specifically for an AI Agent. Next, ask the LLM to write an initial file structure with draft descriptions that fully describe the project. To simplify the process, this task can be divided into two separate parts - creating the file structure for the backend first, and then separately for the frontend.

ㅤ

In the case of Bitva, the following file structure was created:

Backend:
<syntaxhighlight lang="md">
# Project Context
## Core Philosophy
# Technical Stack
# Database Architecture & Indices
# Directory Structure
# Routing Rules
# Business Logic & Mechanics
## 1. Category & Tag Hierarchy
## 2. Game Selection Logic
## 3. Provider-Specific Integration
### Dynamic Tag & Category Resolution Algorithm
## 4. Import & Update Process (CRON)
## 5. Image Processing Pipeline
## 6. Frontend & AdBlock Mechanics
# Coding Guidelines
## 1. Security & Data Integrity
## 2. PHP Standards & Architecture
## 3. Performance & SQLite Optimization
## 4. Frontend & CSS Architecture
## 5. Code Style
# Constraints & Hard Limits
</syntaxhighlight>
ㅤ

Frontend:
<syntaxhighlight lang="md">
# Frontend & UI Architecture
## 1. Global Layout (layout.phtml)
## 2. Homepage View (HomeController@index)
## 3. Category & Tag Pages (`CategoryController@show` / `TagController@show`)
## 4. Navigation & Sidebar Architecture
## 5. Game Play Page (`GameController@show`)
## 6. Game Card Component (Thumbnail Anatomy)
</syntaxhighlight>
ㅤ

=== Filling the Sections of the Instruction File ===
First, it is best to work on the backend separately and move to the frontend afterward.

At this stage, it is necessary to:
* Once again provide the LLM with the '''complete specification that we originally created for ourselves''' (to refresh its context), along with the generated '''backend sections'''.
* Ask the LLM to fill all backend sections in as much detail as possible (in English), using our specification as the primary source (the full specification is provided because frontend details may affect backend formulations).
* Place emphasis on the fact that the descriptions must be written specifically so that an AI Agent can understand the instructions as clearly and transparently as possible, leaving no room for assumptions or creativity that could lead development in a direction different from what is intended.

As a result, we will obtain a reasonably well-described backend section, which will become the foundation for further development.

'''The generated result must be reviewed very carefully and thoughtfully''', because some parts will inevitably be described differently from what is actually required, while many functions will be described with insufficient detail.

<blockquote>This happens because our original specification, written for people, does not contain many details that seem "obvious" to us and would only overload human perception, but for an AI Agent these are critically important nuances. Without them, the Agent will begin making its own assumptions.</blockquote>

'''All necessary corrections, additions, and clarifications should be communicated to the LLM''', and it should be asked to update the relevant subsections so that the AI Agent has no unanswered questions and the text contains no inaccuracies that could mislead it or force it to make assumptions.

As a result, the amount of text will increase significantly because many additional details and clarifications required for the Agent's precise understanding of the project will be added.

After generating what appears to be a good backend section, work begins on each of its individual subsections.

ㅤ

=== Working with Individual Sections of the Instruction File ===
Now it is necessary to perform a very long and detailed process of reviewing and refining all details of each instruction subsection.

'''Step 1: Initial Subsection Review.'''
First, we provide our LLM with the first backend subsection and the corresponding part of our specification (the one written for humans, if such a subsection exists in our specification). The request will look like:

<syntaxhighlight lang="text">
Now check specifically the subsection (subsection name) for formulations that an AI Agent might misinterpret, ambiguities, hidden bugs in our description, missing necessary clarifications for the AI Agent, and fix them
</syntaxhighlight>

As a result, a large number of nuances and hidden bugs will inevitably be discovered. The LLM will correct them and claim that the result is now an excellent reference version of the subsection. '''However, such statements must never be trusted'''. After receiving this revised version of the subsection, it must be reviewed manually. If corrections are needed, we must explain to the LLM what is wrong and ask it to specify '''exact lines or formulations''' that need to be replaced or corrected.

<blockquote>'''Important:''' From this moment on, we no longer copy the full version of the section from the LLM chat. Instead, we must request only the specific lines that need to be changed or added in .md format so they can be copied directly. Otherwise, the LLM may start shortening previous formulations while adding new clarifications.</blockquote>

'''Step 2: Deep Review "from the Agent's Perspective".'''
Next, we again provide the final version of the subsection to the LLM with a request like:

<syntaxhighlight lang="text">
Check the final version of our subsection again for formulations that an AI Agent might misinterpret, ambiguities, hidden bugs in our description, missing necessary clarifications for the AI Agent, or any other issues.

*Send the current version of the subsection for review*
</syntaxhighlight>

To make the LLM more effective at finding vulnerabilities, we can assign it a role during review, for example:

<syntaxhighlight lang="text">
Read this subsection as a 'lazy' or overly literal AI agent that looks for any opportunity to simplify implementation. Find loopholes where it could make mistakes or do something unintended, and close them
</syntaxhighlight>

It will almost certainly find 2–3 critical issues that could cause hallucinations or bugs in the Agent's output. If it responds with the full subsection again or provides corrections in plain text instead of structured changes:
* It must be reminded that it should only provide lines to replace or append, formatted in .md so they can be copied directly.
* You may even paste its previous incorrect response and ask it to rewrite it properly.

'''Step 3: Iterative Reviews.'''
After applying these 2–3 rounds of corrections, the LLM will again claim the result is perfect. However, '''this should still not be trusted'''. The full subsection must be reviewed again with the same request:

<syntaxhighlight lang="text">
Check the final version of our subsection again for formulations that an AI Agent might misinterpret, ambiguities, hidden bugs in our description, missing necessary clarifications for the AI Agent, or any other issues. Read this subsection as a 'lazy' or overly literal AI agent that looks for any opportunity to simplify implementation. Find loopholes where it could make mistakes or do something unintended, and close them.

*Send the current version of the subsection for review*
</syntaxhighlight>

There is a 99% chance that 2–3 vulnerabilities or unclear formulations will still be found.

This process of <code>"request review => apply fixes => request review"</code> must be repeated until the LLM stops finding problems. Initially, critical vulnerabilities will be found, then potentially buggy formulations, then missing clarifications to prevent the agent from making assumptions, and finally minor cosmetic issues.

It is very important to carefully read the LLM's explanations of the problems rather than blindly copying suggested replacements. Sometimes the LLM suggests optimizations or features that are unnecessary and should be rejected.

This process '''may take 10, 20, or even more iterations''', depending on the complexity of the subsection. However, after eliminating the final minor issues, the LLM will eventually state that the description is perfect and no further improvements can be made. We ourselves see the progress of corrections (serious problems have long ceased to be found, and the last ones were very minor edits that simply bring the instructions to perfection), so such an answer '''in this context''' can be trusted.

'''This process must be applied to every subsection.''' It is time-consuming and token-intensive, but it results in a highly detailed and precise description required for the AI Agent.

'''Step 4: Full Section Analysis (Backend).'''
Once all subsections of the backend are brought to a conditional ideal, it is necessary to give LLM a complete picture of all subsections of the backend with a request:

<syntaxhighlight lang="text">
Now carefully analyze the full backend structure and check whether there are any inconsistencies, contradictions, or new issues that appear in the combined context
</syntaxhighlight>

It is possible that the LLM will find additional issues that only appear when viewing the system as a whole. While these are unlikely to be critical (since the model remembers previous subsections), they can still occur, and it is better to be safe. If issues are found, the same iterative correction process must be applied again until no problems remain.

As a result, we obtain a highly detailed and precise backend section (an ideal specification for the AI Agent).

'''Step 5: Creating and Validating the Frontend Section.'''
Next, '''following the same approach used for the backend section''', we create the frontend section. We already have subsection names with minimal descriptions from previous steps, so the same process is applied: generate the filled frontend section based on the human specification and subsection outline, then iteratively review, refine, and validate each subsection until it reaches an ideal state, ensuring consistency across all parts.

Frontend subsections require even more iteration than backend ones because algorithms and rules are easier for an AI Agent to interpret than visual design and UI behavior, which can be implemented in multiple ways (and may, for example, break SEO). Therefore, frontend subsections will be much more detailed due to the large number of constraints introduced to prevent broken SEO, poor mobile responsiveness, or faulty JavaScript behavior.

<blockquote>'''Special attention must be paid to the principle of a single source of truth.''' For example, media queries and screen breakpoints for mobile and desktop layouts must be defined at the very beginning of the document as global constants (e.g., strictly <code>< 1025px</code> for mobile and <code>>= 1025px</code> for desktop). If this value is not fixed at the beginning, the Agent may define different values in different sections, leading to a completely broken responsive design.</blockquote>

'''Step 6: Final Comprehensive Document Validation.'''
After finalizing both backend and frontend sections, the full document must be validated as a whole. Similar to subsection validation, the entire file containing both frontend and backend must be reviewed for inconsistencies across sections. If necessary, specific lines are corrected and the document is revalidated until no issues remain.

'''Stage Outcome:'''

As a result, we obtain a high-quality instruction file (.md) for the AI Agent that will guide it throughout the entire development process. The Agent must still be reminded of these rules when generating functionality, as such a large file cannot be fully accounted for in every request. However, the key achievement is that we now have a maximally detailed and precise specification tailored for an AI Agent.

== AI-Assisted Development ==
After creating a clear and detailed instruction file for the AI agent, you can proceed to generating the project code.

''The following describes the development experience of Bitva.com, but it is applicable to the development of most systems.''

'''Step 1: Agent Launch and Basic Generation.'''
A project folder was created, and the instruction file (created in the previous steps) was placed in the root, along with prepared configurations. The agent was launched in the project directory, and generation was started with the prompt:

<syntaxhighlight lang="text">
read the instructions.md file and execute its instructions
</syntaxhighlight>

The agent analyzed the instructions.md file and asked what exactly I wanted it to do, providing examples — full project initialization, import, frontend, pages, configuration. The option of full project initialization was chosen — prompt to the agent:

<syntaxhighlight lang="text">
Perform full project initialization
</syntaxhighlight>

After that, it spent about 5–10 minutes creating the basic website functionality according to the instructions from the instructions.md file. The agent reported that the work was completed and said that the site could now be launched and tested.

<blockquote>'''Important note:''' It is important to remember that if we initially specify that index.php should be in the public folder, the agent will follow that structure, and the server must be started with the appropriate parameters.</blockquote>

From the very first launch, the site worked (although not perfectly, but it did not crash with an error, which is encouraging).

'''Step 2: Creating the AGENTS.md Cheat Sheet and Code Commits.'''
Next, you need to ask the agent to create an AGENTS.md file in the project root so that it can refer to it as a constant prompt regarding the main nuances of the site. Thus, there end up being 2 files with the project description in the project root:
* '''instructions.md''' — our huge and maximally detailed file (we will refer to its sections during tweaks and edits).
* '''AGENTS.md''' — the compact (relative to instructions.md) file, in which the agent has collected the most important details for itself that it needs to remember when executing any request.

<blockquote>It is '''necessary''' to create a repository and commit the obtained result. And subsequently, every change made by the Agent must be committed.</blockquote>

'''Step 3: Audit and Refactoring.'''
After that, you need to change the model (in the case of Bitva, DeepSeek was chosen) and request a recheck and optimization of the generated code. Prompt:

<syntaxhighlight lang="text">
Analyze the project once again and fix all problems
</syntaxhighlight>

It will perform refactoring and improvements across many files.

In the Bitva project, the main functionality that needed to be tested first was the import of game data and images from provider sources, so the next step was a request for a detailed audit of the game import functionality code and checking it against our instructions. The agent found a minor bug with game naming, fixed it, and reported that everything now strictly corresponds to the instructions. It provided the command to run the import so that the functionality could be tested.

'''Step 4: Debugging (Separating the Roles of LLM and Agent).'''
After the first run of the game import, several bugs were discovered, and now the main assistant becomes not the agent, but our LLM, with which the instructions file was compiled.

To eliminate minor bugs, it is easier to use the LLM (when it is also in the context of the project), so as:
* not to spend the Agent's tokens;
* not to confuse its context with attempts to solve bugs;
* and not to risk that upon a requested minor fix it might start editing other working project files.

For a minor fix, it is enough to give the LLM the function code (or the whole class, if necessary), describe the problem, and it is advisable to ask whether the solution to this bug is simple and fast and we can solve it ourselves, or if it will require sending a request to the agent. If the bug is minor, the LLM points it out very quickly and tells you what needs to be fixed (most often it is either the Agent's inattention or partially missing specific data).

For example, the first bug found on Bitva was an incorrectly specified field name in the game provider's JSON, which suited the first provider but did not suit the second, so images from the second provider did not load. If we had told the Agent that the image import from the second provider was not working, it would have started analyzing and modifying the working code (with just one incorrectly specified field name), adding the handling of exceptions that are unrealistic in our case, wasting tokens in the process and confusing its context. But the LLM immediately said that the field name was specified incorrectly, since we compiled the instructions file with it and it was provided with JSON examples from the providers (examples were not included in the instructions file; field names were specified, but apparently the agent perceived them insufficiently accurately, since there were no examples that would overload the instructions file).

In general, it can be said about this that:
* '''it is much better to search for and fix minor bugs, discuss and reason about the project with the LLM''', the LLM's context can be loaded with examples and assumptions.
* '''And it is best to give the AI Agent clear prompts for development, without reasoning and inaccuracies'''. It copes perfectly with development according to instructions.

Next comes the stage of tweaks and further improvements of the project.

=== Stage of tweaks and improvements of the project ===
Most likely, the first generated version (even after fixing bugs) will be incomplete, or major edits will be required. In this case, you need to turn to our LLM, clearly and in detail describe the improvement, and ask whether it is necessary to involve the Agent for this, or if it can be done simply and quickly without its participation.

If the edit is indeed major (requires understanding the logic and connection between several files), then the LLM will say that it will be more efficient to pass it to the Agent. In this case, it is necessary to ask the LLM to generate a prompt for the Agent:

<syntaxhighlight lang="text">
Generate a clear and understandable prompt for the AI Agent so that it implements my improvements. Write in such a way that even a lazy agent will understand everything, take it into account, and implement it. Also refer to the instructions.md file in the project root. For better understanding, here is the section of the instructions file that relates to the improvements:

*send the section of the instructions file that specifically relates to the improvements we want to make*
</syntaxhighlight>

The LLM will generate a clear and understandable prompt for the Agent, which will describe in maximum detail exactly what we need to do. Usually, it takes from 5 to 20 lines, so:
* it is necessary to create a file where we will copy and edit all prompts to the Agent before sending.
* You need to copy the generated prompt from the LLM into the prompt editing file, reread it, and if necessary - edit it.
* Only after this can you copy the ready prompt and paste it into the agent's input field (in the case of opencode, a short message [N lines pasted] will be displayed in the input line, which means everything was pasted correctly).

<blockquote>'''Important:''' Such manipulations are necessary so that in case of editing a large prompt directly in the agent's input line, you do not accidentally send an incomplete prompt and thereby clog the Agent's context with incorrect data. Such manipulations must be performed during every major improvement that requires the Agent's participation.</blockquote>

=== The need for major edits/improvements ===
<blockquote>In the case when the technical specifications are changed or significantly supplemented during the development process, it is '''necessary''' to edit both the instructions.md file and AGENTS.md, otherwise, the Agent may in a few steps start returning the version of the functionality described in these files, or mix it with the new one.</blockquote>

In such a situation, at the stage when we ask the LLM whether we will need to ask the Agent to perform the necessary edits/improvements, the next request should not be to generate a prompt for the Agent, but '''a re-analysis and editing of the instructions file'''.

You need to send the LLM the old version of the section that describes the part of the project that needs to be changed/improved, and ask it to point out specifically and write in .md format (so that we can simply copy the new lines) what needs to be changed/added so that the instructions exactly match the new requirements. The prompt will be approximately like this:

<syntaxhighlight lang="text">
*detailed description of the new requirements*

Write exactly what specifically needs to be replaced or added in the old version of the instructions block so that it exactly matches the new requirements. Write in .md format so that the lines can be easily copied. Write in detail and understandably for the AI Agent. Here is the old version of the block from the instructions file that needs to be edited:

*old version of the block from the instructions file that needs to be edited*
</syntaxhighlight>

If the new requirements affect several sections of the instructions file, then '''it is better to edit them separately''' so that the LLM does not have to work with a huge text all at once.

The LLM will output what exactly needs to be replaced/supplemented in the instructions section.
* You need to carefully read the edits, analyze them yourself, and see if there are any inconsistencies with our goal or contradictions with the rest of the functionality. It may be necessary to make edits.
* If the changes are global, you need to run the edited section through the LLM a few more times to clear the new version of possible bugs or inaccuracies (using the same scheme by which we initially generated and edited this file).
* After the entire instructions.md file completely matches the new requirements, it is necessary to make edits to the AGENTS.md file (it is much smaller, so no difficulties should arise), after which you can generate a prompt for the Agent.
* Now we give the LLM the section/sections that we have just edited with it, and act according to the known scheme from the '''''Stage of tweaks and improvements of the project'''''.

== Conclusions ==
* The Agent copes perfectly with the development of the project according to clear instructions, so do not hesitate to invest time in a detailed description of the instructions.md file and in generating voluminous and maximally detailed prompts for the Agent. Only in this case will it create exactly what we need.
* The LLM handles minor bugs and improvements perfectly, so if you need to try something, test it, or make minor edits, it is best to use the LLM specifically for such tasks.

Category:Practical AI Solutions

2026-06-29T13:51:40Z

Slavinsky: Slavinsky moved page Category:Etc to Category:Practical AI Solutions

[[Category:Qubot]]

Category:Etc

2026-06-29T13:51:40Z

Slavinsky: Slavinsky moved page Category:Etc to Category:Practical AI Solutions

#REDIRECT [[:Category:Practical AI Solutions]]

Category:Practical AI Solutions

2026-06-15T14:07:48Z

Slavinsky: Created page with "Category:Qubot"

[[Category:Qubot]]

Tutorial on creating a website using AI-Agent

2026-06-15T13:56:50Z

Slavinsky: /* Creating the General File Framework */

[[Category:Etc]]

== Technology Selection for Development ==
First, it is necessary to select and approve the technologies that will be used for project development:
* Programming language (preferably with the version specified from the start)
* Framework (if required)
* DBMS (if the use of a database is required)
In the case of Bitva, which is described in this tutorial, PHP 7.2 without any frameworks and SQLite were chosen.

== Creating a Specification That Is Easy for People to Understand ==
Next, it is necessary to create a specification document that is easy and convenient to navigate.

In the case of Bitva, the specification was divided into 2 parts - '''"Design"''' and '''"Logic and Mechanics"'''.

=== Design ===
The "Design" section separately describes each page/element and its visual behavior.

For example, the "Design" section for Bitva describes:
* The appearance of the main page
* The appearance of Category and Tag pages
* Navigation
* The appearance of the game page
It is also necessary to create mockup images for all pages/elements. This will help both when describing the interface in text and when creating specifications for the AI Agent later.

If there are examples of interfaces from other similar websites, AI can be used to create a detailed and understandable description of the page design. If mockup images already exist at the interface description stage, they can also be provided.

In the case of Bitva, Gemini (Pro 3.1) was used to describe some interface elements (navigation, part of the main page) based on example screenshots. However, it definitely will not describe an interface perfectly from a screenshot, because it will add details that are unnecessary or incorrectly describe the actual requirements. Therefore, a specification generated by Gemini should be considered a framework that can be used as a starting point to save time, but the entire text must still be reviewed and edited manually.

=== Logic and Mechanics ===
The "Logic and Mechanics" section describes the main processes of the website. The behavior of pages and all functionality must be described in clear and understandable language.

For Bitva, the "Logic and Mechanics" section was divided into the following parts:
* Categories/Tags/Collections (complete behavior of pages and their elements)
* Game Import (logic for importing game data from supplier JSON files)
** Gamepix supplier integration
** Zygomatic supplier integration
* Images (logic for saving, naming, and compressing images)
* Logic for assigning Categories and Tags

=== Creating the Database Schema ===
It is also necessary to create a database schema (or a skeleton data structure if a database is not being used).

After the specification and database schema have been approved, it is possible to proceed to creating instructions for the AI Agent.

== Creating the Instruction File for the AI Agent ==
Having a clearly described specification for yourself and the team, the next step is to create an instruction file for the AI Agent. This is a .md file that will be located in the project root, and the agent will always take its contents into account during any code generation.

It is important to describe the project in as much detail as possible, clarifying all nuances that the Agent might otherwise assume or misunderstand.

It is better to write the project description in the instruction file in English so that the Agent does not have any issues understanding the language.

An LLM will be needed to create a detailed and complete description. In the case of Bitva, Gemini was used.

Asking an LLM to create such a file directly from the specification is not effective. Therefore, the process is divided into steps.

=== Creating the General File Framework ===
First, the complete specification and data structure created in the previous step should be provided to the LLM. It is necessary to explain the situation: that we are going to work with an AI Agent and need to create a .md file containing complete instructions that will be taken into account by the Agent during development. The goal is to create a description that will be perfectly understandable specifically for an AI Agent. Next, ask the LLM to write an initial file structure with draft descriptions that fully describe the project. To simplify the process, this task can be divided into two separate parts - creating the file structure for the backend first, and then separately for the frontend.

ㅤ

In the case of Bitva, the following file structure was created:

Backend:
<syntaxhighlight lang="md">
# Project Context
## Core Philosophy
# Technical Stack
# Database Architecture & Indices
# Directory Structure
# Routing Rules
# Business Logic & Mechanics
## 1. Category & Tag Hierarchy
## 2. Game Selection Logic
## 3. Provider-Specific Integration
### Dynamic Tag & Category Resolution Algorithm
## 4. Import & Update Process (CRON)
## 5. Image Processing Pipeline
## 6. Frontend & AdBlock Mechanics
# Coding Guidelines
## 1. Security & Data Integrity
## 2. PHP Standards & Architecture
## 3. Performance & SQLite Optimization
## 4. Frontend & CSS Architecture
## 5. Code Style
# Constraints & Hard Limits
</syntaxhighlight>
ㅤ

Frontend:
<syntaxhighlight lang="md">
# Frontend & UI Architecture
## 1. Global Layout (layout.phtml)
## 2. Homepage View (HomeController@index)
## 3. Category & Tag Pages (`CategoryController@show` / `TagController@show`)
## 4. Navigation & Sidebar Architecture
## 5. Game Play Page (`GameController@show`)
## 6. Game Card Component (Thumbnail Anatomy)
</syntaxhighlight>
ㅤ

=== Filling the Sections of the Instruction File ===
First, it is best to work on the backend separately and move to the frontend afterward.

At this stage, it is necessary to once again provide the LLM with the '''complete specification that we originally created for ourselves''' (to refresh its context), along with the generated '''backend sections'''. The LLM should be asked to fill all backend sections in as much detail as possible (in English), using our specification as the primary source (the full specification is provided because frontend details may affect backend formulations). When making the request, emphasis should be placed on the fact that the descriptions must be written specifically so that an AI Agent can understand the instructions as clearly and transparently as possible, leaving no room for assumptions or creativity that could lead development in a direction different from what is intended.

As a result, we will obtain a reasonably well-described backend section, which will become the foundation for further development.

The generated result must be reviewed very carefully and thoughtfully, because some parts will inevitably be described differently from what is actually required, while many functions will be described with insufficient detail. This happens because our original specification, written for people, does not contain many details that seem "obvious" to us and would only overload human perception, but for an AI Agent these are critically important nuances. Without them, the Agent will begin making its own assumptions.

All necessary corrections, additions, and clarifications should be communicated to the LLM, and it should be asked to update the relevant subsections so that the AI Agent has no unanswered questions and the text contains no inaccuracies that could mislead it or force it to make assumptions. As a result, the amount of text will increase significantly because many additional details and clarifications required for the Agent's precise understanding of the project will be added.

After generating what appears to be a good backend section, work begins on each of its individual subsections.

ㅤ

=== Working with Individual Sections of the Instruction File ===
Now it is necessary to perform a very long and detailed process of reviewing and refining all details of each instruction subsection.

First, we provide our LLM with the first backend subsection and the corresponding part of our specification (the one written for humans, if such a subsection exists in our specification). The request will look like: "<code>Now check specifically the subsection ''(subsection name)'' for formulations that an AI Agent might misinterpret, ambiguities, hidden bugs in our description, missing necessary clarifications for the AI Agent, and fix them</code>". As a result, a large number of nuances and hidden bugs will inevitably be discovered. The LLM will correct them and claim that the result is now an excellent reference version of the subsection. '''However, such statements must never be trusted'''. After receiving this revised version of the subsection, it must be reviewed manually. If corrections are needed, we must explain to the LLM what is wrong and ask it to specify '''exact lines or formulations''' that need to be replaced or corrected.

'''Important: From this moment on, we no longer copy the full version of the section from the LLM chat. Instead, we must request only the specific lines that need to be changed or added in .md format so they can be copied directly. Otherwise, the LLM may start shortening previous formulations while adding new clarifications.'''

Next, we again provide the final version of the subsection to the LLM with a request like: "<code>Check the final version of our subsection again for formulations that an AI Agent might misinterpret, ambiguities, hidden bugs in our description, missing necessary clarifications for the AI Agent, or any other issues</code>". To make the LLM more effective at finding vulnerabilities, we can assign it a role during review, for example: "<code>Read this subsection as a 'lazy' or overly literal AI agent that looks for any opportunity to simplify implementation. Find loopholes where it could make mistakes or do something unintended, and close them</code>". It will almost certainly find 2–3 critical issues that could cause hallucinations or bugs in the Agent's output. If it responds with the full subsection again or provides corrections in plain text instead of structured changes, it must be reminded that it should only provide lines to replace or append, formatted in .md so they can be copied directly. You may even paste its previous incorrect response and ask it to rewrite it properly.

After applying these 2–3 rounds of corrections, the LLM will again claim the result is perfect. However, '''this should still not be trusted'''. The full subsection must be reviewed again with the same request: "<code>Check the final version of our subsection again for formulations that an AI Agent might misinterpret, ambiguities, hidden bugs in our description, missing necessary clarifications for the AI Agent, or any other issues. Read this subsection as a 'lazy' or overly literal AI agent that looks for any opportunity to simplify implementation. Find loopholes where it could make mistakes or do something unintended, and close them</code>". There is a 99% chance that 2–3 vulnerabilities or unclear formulations will still be found.

This process of <code>"request review => apply fixes => request review"</code> must be repeated until the LLM stops finding problems. Initially, critical vulnerabilities will be found, then potentially buggy formulations, then missing clarifications to prevent the agent from making assumptions, and finally minor cosmetic issues. It is very important to carefully read the LLM's explanations of the problems rather than blindly copying suggested replacements. Sometimes the LLM suggests optimizations or features that are unnecessary and should be rejected. This process '''may take 10, 20, or even more iterations''', depending on the complexity of the subsection. However, after eliminating the final minor issues, the LLM will eventually state that the description is perfect and no further improvements can be made. We ourselves see the progress of corrections (serious problems have long ceased to be found, and the last ones were very minor edits that simply bring the instructions to perfection), so such an answer '''in this context''' can be trusted.

'''This process must be applied to every subsection.''' It is time-consuming and token-intensive, but it results in a highly detailed and precise description required for the AI Agent.

Once all subsections of the backend are brought to a conditional ideal, it is necessary to give LLM a complete picture of all subsections of the backend with a request: <code>"Now carefully analyze the full backend structure and check whether there are any inconsistencies, contradictions, or new issues that appear in the combined context"</code>. It is possible that the LLM will find additional issues that only appear when viewing the system as a whole. While these are unlikely to be critical (since the model remembers previous subsections), they can still occur, and it is better to be safe. If issues are found, the same iterative correction process must be applied again until no problems remain.

As a result, we obtain a highly detailed and precise backend section (an ideal specification for the AI Agent).

Next, '''following the same approach used for the backend section''', we create the frontend section. We already have subsection names with minimal descriptions from previous steps, so the same process is applied: generate the filled frontend section based on the human specification and subsection outline, then iteratively review, refine, and validate each subsection until it reaches an ideal state, ensuring consistency across all parts.

Frontend subsections require even more iteration than backend ones because algorithms and rules are easier for an AI Agent to interpret than visual design and UI behavior, which can be implemented in multiple ways (and may, for example, break SEO). Therefore, frontend subsections will be much more detailed due to the large number of constraints introduced to prevent broken SEO, poor mobile responsiveness, or faulty JavaScript behavior.

Special attention must be paid to the principle of a '''single source of truth'''. For example, media queries and screen breakpoints for mobile and desktop layouts must be defined at the very beginning of the document as global constants (e.g., strictly <code>< 1025px</code> for mobile and <code>>= 1025px</code> for desktop). If this value is not fixed at the beginning, the Agent may define different values in different sections, leading to a completely broken responsive design.

After finalizing both backend and frontend sections, the full document must be validated as a whole. Similar to subsection validation, the entire file containing both frontend and backend must be reviewed for inconsistencies across sections. If necessary, specific lines are corrected and the document is revalidated until no issues remain.

As a result, we obtain a high-quality instruction file (.md) for the AI Agent that will guide it throughout the entire development process. The Agent must still be reminded of these rules when generating functionality, as such a large file cannot be fully accounted for in every request. However, the key achievement is that we now have a maximally detailed and precise specification tailored for an AI Agent.

== Website Development Using an AI Agent ==
After creating a clear and detailed instruction file for the AI agent, you can proceed to generating the project code.

''The following describes the development experience of Bitva.com, but it is applicable to the development of most systems.''

A project folder was created, and the instruction file (created in the previous steps) was placed in the root, along with prepared configurations. The agent was launched in the project directory, and generation was started with the prompt: <code>"read the instructions.md file and execute its instructions"</code>.

The agent analyzed the instructions.md file and asked what exactly I wanted it to do, providing examples — full project initialization, import, frontend, pages, configuration. The option of full project initialization was chosen — prompt to the agent: <code>"Perform full project initialization"</code>.

After that, it spent about 5–10 minutes creating the basic website functionality according to the instructions from the instructions.md file. The agent reported that the work was completed and said that the site could now be launched and tested. It is important to remember that if we initially specify that index.php should be in the public folder, the agent will follow that structure, and the server must be started with the appropriate parameters. From the very first launch, the site worked (although not perfectly, but it did not crash with an error, which is encouraging).

Next, you need to ask the agent to create an AGENTS.md file in the project root so that it can refer to it as a constant prompt regarding the main nuances of the site. Thus, there end up being 2 files with the project description in the project root - our huge and maximally detailed instructions.md (we will refer to its sections during tweaks and edits), and the compact (relative to instructions.md) AGENTS.md file, in which the agent has collected the most important details for itself that it needs to remember when executing any request.

It is '''necessary''' to create a repository and commit the obtained result. And subsequently, every change made by the Agent must be committed.

After that, you need to change the model (in the case of Bitva, DeepSeek was chosen) and request a recheck and optimization of the generated code. Prompt: <code>"Analyze the project once again and fix all problems"</code>. It will perform refactoring and improvements across many files.

In the Bitva project, the main functionality that needed to be tested first was the import of game data and images from provider sources, so the next step was a request for a detailed audit of the game import functionality code and checking it against our instructions. The agent found a minor bug with game naming, fixed it, and reported that everything now strictly corresponds to the instructions. It provided the command to run the import so that the functionality could be tested.

After the first run of the game import, several bugs were discovered, and now the main assistant becomes not the agent, but our LLM, with which the instructions file was compiled. To eliminate minor bugs, it is easier to use the LLM (when it is also in the context of the project), so as not to spend the Agent's tokens, not to confuse its context with attempts to solve bugs, and not to risk that upon a requested minor fix it might start editing other working project files.

For a minor fix, it is enough to give the LLM the function code (or the whole class, if necessary), describe the problem, and it is advisable to ask whether the solution to this bug is simple and fast and we can solve it ourselves, or if it will require sending a request to the agent. If the bug is minor, the LLM points it out very quickly and tells you what needs to be fixed (most often it is either the Agent's inattention or partially missing specific data). For example, the first bug found on Bitva was an incorrectly specified field name in the game provider's JSON, which suited the first provider but did not suit the second, so images from the second provider did not load. If we had told the Agent that the image import from the second provider was not working, it would have started analyzing and modifying the working code (with just one incorrectly specified field name), adding the handling of exceptions that are unrealistic in our case, wasting tokens in the process and confusing its context. But the LLM immediately said that the field name was specified incorrectly, since we compiled the instructions file with it and it was provided with JSON examples from the providers (examples were not included in the instructions file; field names were specified, but apparently the agent perceived them insufficiently accurately, since there were no examples that would overload the instructions file).

In general, it can be said about this that '''it is much better to search for and fix minor bugs, discuss and reason about the project with the LLM''', the LLM's context can be loaded with examples and assumptions. '''And it is best to give the AI Agent clear prompts for development, without reasoning and inaccuracies'''. It copes perfectly with development according to instructions.

Next comes the stage of tweaks and further improvements of the project.

=== Stage of tweaks and improvements of the project ===
Most likely, the first generated version (even after fixing bugs) will be incomplete, or major edits will be required. In this case, you need to turn to our LLM, clearly and in detail describe the improvement, and ask whether it is necessary to involve the Agent for this, or if it can be done simply and quickly without its participation. If the edit is indeed major (requires understanding the logic and connection between several files), then the LLM will say that it will be more efficient to pass it to the Agent. In this case, it is necessary to ask the LLM to generate a prompt for the Agent: <code>"Generate a clear and understandable prompt for the AI Agent so that it implements my improvements. Write in such a way that even a lazy agent will understand everything, take it into account, and implement it. Also refer to the instructions.md file in the project root. For better understanding, here is the section of the instructions file that relates to the improvements: ''*send the section of the instructions file that specifically relates to the improvements we want to make*''"</code>.

The LLM will generate a clear and understandable prompt for the Agent, which will describe in maximum detail exactly what we need to do. Usually, it takes from 5 to 20 lines, so it is necessary to create a file where we will copy and edit all prompts to the Agent before sending. You need to copy the generated prompt from the LLM into the prompt editing file, reread it, and if necessary - edit it. Only after this can you copy the ready prompt and paste it into the agent's input field (in the case of opencode, a short message [N lines pasted] will be displayed in the input line, which means everything was pasted correctly). Such manipulations are necessary so that in case of editing a large prompt directly in the agent's input line, you do not accidentally send an incomplete prompt and thereby clog the Agent's context with incorrect data.

Such manipulations must be performed during every major improvement that requires the Agent's participation.

=== The need for major edits/improvements ===
In the case when the technical specifications are changed or significantly supplemented during the development process, it is '''necessary''' to edit both the instructions.md file and AGENTS.md, otherwise, the Agent may in a few steps start returning the version of the functionality described in these files, or mix it with the new one.

In such a situation, at the stage when we ask the LLM whether we will need to ask the Agent to perform the necessary edits/improvements, the next request should not be to generate a prompt for the Agent, but '''a re-analysis and editing of the instructions file'''. You need to send the LLM the old version of the section that describes the part of the project that needs to be changed/improved, and ask it to point out specifically and write in .md format (so that we can simply copy the new lines) what needs to be changed/added so that the instructions exactly match the new requirements. The prompt will be approximately like this: <code>"''*detailed description of the new requirements*'' Write exactly what specifically needs to be replaced or added in the old version of the instructions block so that it exactly matches the new requirements. Write in .md format so that the lines can be easily copied. Write in detail and understandably for the AI Agent. Here is the old version of the block from the instructions file that needs to be edited: ''*old version of the block from the instructions file that needs to be edited*''"</code>. If the new requirements affect several sections of the instructions file, then '''it is better to edit them separately''' so that the LLM does not have to work with a huge text all at once.

The LLM will output what exactly needs to be replaced/supplemented in the instructions section. You need to carefully read the edits, analyze them yourself, and see if there are any inconsistencies with our goal or contradictions with the rest of the functionality. It may be necessary to make edits. If the changes are global, you need to run the edited section through the LLM a few more times to clear the new version of possible bugs or inaccuracies (using the same scheme by which we initially generated and edited this file).

After the entire instructions.md file completely matches the new requirements, it is necessary to make edits to the AGENTS.md file (it is much smaller, so no difficulties should arise), after which you can generate a prompt for the Agent. Now we give the LLM the section/sections that we have just edited with it, and act according to the known scheme from the '''''Stage of tweaks and improvements of the project'''''.

== Conclusions ==
The Agent copes perfectly with the development of the project according to clear instructions, so do not hesitate to invest time in a detailed description of the instructions.md file and in generating voluminous and maximally detailed prompts for the Agent. Only in this case will it create exactly what we need.

The LLM handles minor bugs and improvements perfectly, so if you need to try something, test it, or make minor edits, it is best to use the LLM specifically for such tasks.

Tutorial on creating a website using AI-Agent

2026-06-15T13:55:13Z

Slavinsky: <syntaxhighlight lang="md">, not markdown

[[Category:Etc]]

== Technology Selection for Development ==
First, it is necessary to select and approve the technologies that will be used for project development:
* Programming language (preferably with the version specified from the start)
* Framework (if required)
* DBMS (if the use of a database is required)
In the case of Bitva, which is described in this tutorial, PHP 7.2 without any frameworks and SQLite were chosen.

== Creating a Specification That Is Easy for People to Understand ==
Next, it is necessary to create a specification document that is easy and convenient to navigate.

In the case of Bitva, the specification was divided into 2 parts - '''"Design"''' and '''"Logic and Mechanics"'''.

=== Design ===
The "Design" section separately describes each page/element and its visual behavior.

For example, the "Design" section for Bitva describes:
* The appearance of the main page
* The appearance of Category and Tag pages
* Navigation
* The appearance of the game page
It is also necessary to create mockup images for all pages/elements. This will help both when describing the interface in text and when creating specifications for the AI Agent later.

If there are examples of interfaces from other similar websites, AI can be used to create a detailed and understandable description of the page design. If mockup images already exist at the interface description stage, they can also be provided.

In the case of Bitva, Gemini (Pro 3.1) was used to describe some interface elements (navigation, part of the main page) based on example screenshots. However, it definitely will not describe an interface perfectly from a screenshot, because it will add details that are unnecessary or incorrectly describe the actual requirements. Therefore, a specification generated by Gemini should be considered a framework that can be used as a starting point to save time, but the entire text must still be reviewed and edited manually.

=== Logic and Mechanics ===
The "Logic and Mechanics" section describes the main processes of the website. The behavior of pages and all functionality must be described in clear and understandable language.

For Bitva, the "Logic and Mechanics" section was divided into the following parts:
* Categories/Tags/Collections (complete behavior of pages and their elements)
* Game Import (logic for importing game data from supplier JSON files)
** Gamepix supplier integration
** Zygomatic supplier integration
* Images (logic for saving, naming, and compressing images)
* Logic for assigning Categories and Tags

=== Creating the Database Schema ===
It is also necessary to create a database schema (or a skeleton data structure if a database is not being used).

After the specification and database schema have been approved, it is possible to proceed to creating instructions for the AI Agent.

== Creating the Instruction File for the AI Agent ==
Having a clearly described specification for yourself and the team, the next step is to create an instruction file for the AI Agent. This is a .md file that will be located in the project root, and the agent will always take its contents into account during any code generation.

It is important to describe the project in as much detail as possible, clarifying all nuances that the Agent might otherwise assume or misunderstand.

It is better to write the project description in the instruction file in English so that the Agent does not have any issues understanding the language.

An LLM will be needed to create a detailed and complete description. In the case of Bitva, Gemini was used.

Asking an LLM to create such a file directly from the specification is not effective. Therefore, the process is divided into steps.

=== Creating the General File Framework ===
First, the complete specification and data structure created in the previous step should be provided to the LLM. It is necessary to explain the situation: that we are going to work with an AI Agent and need to create a .md file containing complete instructions that will be taken into account by the Agent during development. The goal is to create a description that will be perfectly understandable specifically for an AI Agent. Next, ask the LLM to write an initial file structure with draft descriptions that fully describe the project. To simplify the process, this task can be divided into two separate parts - creating the file structure for the backend first, and then separately for the frontend.

ㅤ

In the case of Bitva, the following file structure was created:

Backend:
<syntaxhighlight lang="md">
# Project Context
## Core Philosophy
# Technical Stack
# Database Architecture & Indices
# Directory Structure
# Routing Rules
# Business Logic & Mechanics
## 1. Category & Tag Hierarchy
## 2. Game Selection Logic
## 3. Provider-Specific Integration
### Dynamic Tag & Category Resolution Algorithm
## 4. Import & Update Process (CRON)
## 5. Image Processing Pipeline
## 6. Frontend & AdBlock Mechanics
# Coding Guidelines
## 1. Security & Data Integrity
## 2. PHP Standards & Architecture
## 3. Performance & SQLite Optimization
## 4. Frontend & CSS Architecture
## 5. Code Style
# Constraints & Hard Limits
</syntaxhighlight>
ㅤ

Frontend:
python
# Frontend & UI Architecture
## 1. Global Layout (layout.phtml)
## 2. Homepage View (HomeController@index)
## 3. Category & Tag Pages (`CategoryController@show` / `TagController@show`)
## 4. Navigation & Sidebar Architecture
## 5. Game Play Page (`GameController@show`)
## 6. Game Card Component (Thumbnail Anatomy)
</syntaxhighlight>
ㅤ

=== Filling the Sections of the Instruction File ===
First, it is best to work on the backend separately and move to the frontend afterward.

At this stage, it is necessary to once again provide the LLM with the '''complete specification that we originally created for ourselves''' (to refresh its context), along with the generated '''backend sections'''. The LLM should be asked to fill all backend sections in as much detail as possible (in English), using our specification as the primary source (the full specification is provided because frontend details may affect backend formulations). When making the request, emphasis should be placed on the fact that the descriptions must be written specifically so that an AI Agent can understand the instructions as clearly and transparently as possible, leaving no room for assumptions or creativity that could lead development in a direction different from what is intended.

As a result, we will obtain a reasonably well-described backend section, which will become the foundation for further development.

The generated result must be reviewed very carefully and thoughtfully, because some parts will inevitably be described differently from what is actually required, while many functions will be described with insufficient detail. This happens because our original specification, written for people, does not contain many details that seem "obvious" to us and would only overload human perception, but for an AI Agent these are critically important nuances. Without them, the Agent will begin making its own assumptions.

All necessary corrections, additions, and clarifications should be communicated to the LLM, and it should be asked to update the relevant subsections so that the AI Agent has no unanswered questions and the text contains no inaccuracies that could mislead it or force it to make assumptions. As a result, the amount of text will increase significantly because many additional details and clarifications required for the Agent's precise understanding of the project will be added.

After generating what appears to be a good backend section, work begins on each of its individual subsections.

ㅤ

=== Working with Individual Sections of the Instruction File ===
Now it is necessary to perform a very long and detailed process of reviewing and refining all details of each instruction subsection.

First, we provide our LLM with the first backend subsection and the corresponding part of our specification (the one written for humans, if such a subsection exists in our specification). The request will look like: "<code>Now check specifically the subsection ''(subsection name)'' for formulations that an AI Agent might misinterpret, ambiguities, hidden bugs in our description, missing necessary clarifications for the AI Agent, and fix them</code>". As a result, a large number of nuances and hidden bugs will inevitably be discovered. The LLM will correct them and claim that the result is now an excellent reference version of the subsection. '''However, such statements must never be trusted'''. After receiving this revised version of the subsection, it must be reviewed manually. If corrections are needed, we must explain to the LLM what is wrong and ask it to specify '''exact lines or formulations''' that need to be replaced or corrected.

'''Important: From this moment on, we no longer copy the full version of the section from the LLM chat. Instead, we must request only the specific lines that need to be changed or added in .md format so they can be copied directly. Otherwise, the LLM may start shortening previous formulations while adding new clarifications.'''

Next, we again provide the final version of the subsection to the LLM with a request like: "<code>Check the final version of our subsection again for formulations that an AI Agent might misinterpret, ambiguities, hidden bugs in our description, missing necessary clarifications for the AI Agent, or any other issues</code>". To make the LLM more effective at finding vulnerabilities, we can assign it a role during review, for example: "<code>Read this subsection as a 'lazy' or overly literal AI agent that looks for any opportunity to simplify implementation. Find loopholes where it could make mistakes or do something unintended, and close them</code>". It will almost certainly find 2–3 critical issues that could cause hallucinations or bugs in the Agent's output. If it responds with the full subsection again or provides corrections in plain text instead of structured changes, it must be reminded that it should only provide lines to replace or append, formatted in .md so they can be copied directly. You may even paste its previous incorrect response and ask it to rewrite it properly.

After applying these 2–3 rounds of corrections, the LLM will again claim the result is perfect. However, '''this should still not be trusted'''. The full subsection must be reviewed again with the same request: "<code>Check the final version of our subsection again for formulations that an AI Agent might misinterpret, ambiguities, hidden bugs in our description, missing necessary clarifications for the AI Agent, or any other issues. Read this subsection as a 'lazy' or overly literal AI agent that looks for any opportunity to simplify implementation. Find loopholes where it could make mistakes or do something unintended, and close them</code>". There is a 99% chance that 2–3 vulnerabilities or unclear formulations will still be found.

This process of <code>"request review => apply fixes => request review"</code> must be repeated until the LLM stops finding problems. Initially, critical vulnerabilities will be found, then potentially buggy formulations, then missing clarifications to prevent the agent from making assumptions, and finally minor cosmetic issues. It is very important to carefully read the LLM's explanations of the problems rather than blindly copying suggested replacements. Sometimes the LLM suggests optimizations or features that are unnecessary and should be rejected. This process '''may take 10, 20, or even more iterations''', depending on the complexity of the subsection. However, after eliminating the final minor issues, the LLM will eventually state that the description is perfect and no further improvements can be made. We ourselves see the progress of corrections (serious problems have long ceased to be found, and the last ones were very minor edits that simply bring the instructions to perfection), so such an answer '''in this context''' can be trusted.

'''This process must be applied to every subsection.''' It is time-consuming and token-intensive, but it results in a highly detailed and precise description required for the AI Agent.

Once all subsections of the backend are brought to a conditional ideal, it is necessary to give LLM a complete picture of all subsections of the backend with a request: <code>"Now carefully analyze the full backend structure and check whether there are any inconsistencies, contradictions, or new issues that appear in the combined context"</code>. It is possible that the LLM will find additional issues that only appear when viewing the system as a whole. While these are unlikely to be critical (since the model remembers previous subsections), they can still occur, and it is better to be safe. If issues are found, the same iterative correction process must be applied again until no problems remain.

As a result, we obtain a highly detailed and precise backend section (an ideal specification for the AI Agent).

Next, '''following the same approach used for the backend section''', we create the frontend section. We already have subsection names with minimal descriptions from previous steps, so the same process is applied: generate the filled frontend section based on the human specification and subsection outline, then iteratively review, refine, and validate each subsection until it reaches an ideal state, ensuring consistency across all parts.

Frontend subsections require even more iteration than backend ones because algorithms and rules are easier for an AI Agent to interpret than visual design and UI behavior, which can be implemented in multiple ways (and may, for example, break SEO). Therefore, frontend subsections will be much more detailed due to the large number of constraints introduced to prevent broken SEO, poor mobile responsiveness, or faulty JavaScript behavior.

Special attention must be paid to the principle of a '''single source of truth'''. For example, media queries and screen breakpoints for mobile and desktop layouts must be defined at the very beginning of the document as global constants (e.g., strictly <code>< 1025px</code> for mobile and <code>>= 1025px</code> for desktop). If this value is not fixed at the beginning, the Agent may define different values in different sections, leading to a completely broken responsive design.

After finalizing both backend and frontend sections, the full document must be validated as a whole. Similar to subsection validation, the entire file containing both frontend and backend must be reviewed for inconsistencies across sections. If necessary, specific lines are corrected and the document is revalidated until no issues remain.

As a result, we obtain a high-quality instruction file (.md) for the AI Agent that will guide it throughout the entire development process. The Agent must still be reminded of these rules when generating functionality, as such a large file cannot be fully accounted for in every request. However, the key achievement is that we now have a maximally detailed and precise specification tailored for an AI Agent.

== Website Development Using an AI Agent ==
After creating a clear and detailed instruction file for the AI agent, you can proceed to generating the project code.

''The following describes the development experience of Bitva.com, but it is applicable to the development of most systems.''

A project folder was created, and the instruction file (created in the previous steps) was placed in the root, along with prepared configurations. The agent was launched in the project directory, and generation was started with the prompt: <code>"read the instructions.md file and execute its instructions"</code>.

The agent analyzed the instructions.md file and asked what exactly I wanted it to do, providing examples — full project initialization, import, frontend, pages, configuration. The option of full project initialization was chosen — prompt to the agent: <code>"Perform full project initialization"</code>.

After that, it spent about 5–10 minutes creating the basic website functionality according to the instructions from the instructions.md file. The agent reported that the work was completed and said that the site could now be launched and tested. It is important to remember that if we initially specify that index.php should be in the public folder, the agent will follow that structure, and the server must be started with the appropriate parameters. From the very first launch, the site worked (although not perfectly, but it did not crash with an error, which is encouraging).

Next, you need to ask the agent to create an AGENTS.md file in the project root so that it can refer to it as a constant prompt regarding the main nuances of the site. Thus, there end up being 2 files with the project description in the project root - our huge and maximally detailed instructions.md (we will refer to its sections during tweaks and edits), and the compact (relative to instructions.md) AGENTS.md file, in which the agent has collected the most important details for itself that it needs to remember when executing any request.

It is '''necessary''' to create a repository and commit the obtained result. And subsequently, every change made by the Agent must be committed.

After that, you need to change the model (in the case of Bitva, DeepSeek was chosen) and request a recheck and optimization of the generated code. Prompt: <code>"Analyze the project once again and fix all problems"</code>. It will perform refactoring and improvements across many files.

In the Bitva project, the main functionality that needed to be tested first was the import of game data and images from provider sources, so the next step was a request for a detailed audit of the game import functionality code and checking it against our instructions. The agent found a minor bug with game naming, fixed it, and reported that everything now strictly corresponds to the instructions. It provided the command to run the import so that the functionality could be tested.

After the first run of the game import, several bugs were discovered, and now the main assistant becomes not the agent, but our LLM, with which the instructions file was compiled. To eliminate minor bugs, it is easier to use the LLM (when it is also in the context of the project), so as not to spend the Agent's tokens, not to confuse its context with attempts to solve bugs, and not to risk that upon a requested minor fix it might start editing other working project files.

For a minor fix, it is enough to give the LLM the function code (or the whole class, if necessary), describe the problem, and it is advisable to ask whether the solution to this bug is simple and fast and we can solve it ourselves, or if it will require sending a request to the agent. If the bug is minor, the LLM points it out very quickly and tells you what needs to be fixed (most often it is either the Agent's inattention or partially missing specific data). For example, the first bug found on Bitva was an incorrectly specified field name in the game provider's JSON, which suited the first provider but did not suit the second, so images from the second provider did not load. If we had told the Agent that the image import from the second provider was not working, it would have started analyzing and modifying the working code (with just one incorrectly specified field name), adding the handling of exceptions that are unrealistic in our case, wasting tokens in the process and confusing its context. But the LLM immediately said that the field name was specified incorrectly, since we compiled the instructions file with it and it was provided with JSON examples from the providers (examples were not included in the instructions file; field names were specified, but apparently the agent perceived them insufficiently accurately, since there were no examples that would overload the instructions file).

In general, it can be said about this that '''it is much better to search for and fix minor bugs, discuss and reason about the project with the LLM''', the LLM's context can be loaded with examples and assumptions. '''And it is best to give the AI Agent clear prompts for development, without reasoning and inaccuracies'''. It copes perfectly with development according to instructions.

Next comes the stage of tweaks and further improvements of the project.

=== Stage of tweaks and improvements of the project ===
Most likely, the first generated version (even after fixing bugs) will be incomplete, or major edits will be required. In this case, you need to turn to our LLM, clearly and in detail describe the improvement, and ask whether it is necessary to involve the Agent for this, or if it can be done simply and quickly without its participation. If the edit is indeed major (requires understanding the logic and connection between several files), then the LLM will say that it will be more efficient to pass it to the Agent. In this case, it is necessary to ask the LLM to generate a prompt for the Agent: <code>"Generate a clear and understandable prompt for the AI Agent so that it implements my improvements. Write in such a way that even a lazy agent will understand everything, take it into account, and implement it. Also refer to the instructions.md file in the project root. For better understanding, here is the section of the instructions file that relates to the improvements: ''*send the section of the instructions file that specifically relates to the improvements we want to make*''"</code>.

The LLM will generate a clear and understandable prompt for the Agent, which will describe in maximum detail exactly what we need to do. Usually, it takes from 5 to 20 lines, so it is necessary to create a file where we will copy and edit all prompts to the Agent before sending. You need to copy the generated prompt from the LLM into the prompt editing file, reread it, and if necessary - edit it. Only after this can you copy the ready prompt and paste it into the agent's input field (in the case of opencode, a short message [N lines pasted] will be displayed in the input line, which means everything was pasted correctly). Such manipulations are necessary so that in case of editing a large prompt directly in the agent's input line, you do not accidentally send an incomplete prompt and thereby clog the Agent's context with incorrect data.

Such manipulations must be performed during every major improvement that requires the Agent's participation.

=== The need for major edits/improvements ===
In the case when the technical specifications are changed or significantly supplemented during the development process, it is '''necessary''' to edit both the instructions.md file and AGENTS.md, otherwise, the Agent may in a few steps start returning the version of the functionality described in these files, or mix it with the new one.

In such a situation, at the stage when we ask the LLM whether we will need to ask the Agent to perform the necessary edits/improvements, the next request should not be to generate a prompt for the Agent, but '''a re-analysis and editing of the instructions file'''. You need to send the LLM the old version of the section that describes the part of the project that needs to be changed/improved, and ask it to point out specifically and write in .md format (so that we can simply copy the new lines) what needs to be changed/added so that the instructions exactly match the new requirements. The prompt will be approximately like this: <code>"''*detailed description of the new requirements*'' Write exactly what specifically needs to be replaced or added in the old version of the instructions block so that it exactly matches the new requirements. Write in .md format so that the lines can be easily copied. Write in detail and understandably for the AI Agent. Here is the old version of the block from the instructions file that needs to be edited: ''*old version of the block from the instructions file that needs to be edited*''"</code>. If the new requirements affect several sections of the instructions file, then '''it is better to edit them separately''' so that the LLM does not have to work with a huge text all at once.

The LLM will output what exactly needs to be replaced/supplemented in the instructions section. You need to carefully read the edits, analyze them yourself, and see if there are any inconsistencies with our goal or contradictions with the rest of the functionality. It may be necessary to make edits. If the changes are global, you need to run the edited section through the LLM a few more times to clear the new version of possible bugs or inaccuracies (using the same scheme by which we initially generated and edited this file).

After the entire instructions.md file completely matches the new requirements, it is necessary to make edits to the AGENTS.md file (it is much smaller, so no difficulties should arise), after which you can generate a prompt for the Agent. Now we give the LLM the section/sections that we have just edited with it, and act according to the known scheme from the '''''Stage of tweaks and improvements of the project'''''.

== Conclusions ==
The Agent copes perfectly with the development of the project according to clear instructions, so do not hesitate to invest time in a detailed description of the instructions.md file and in generating voluminous and maximally detailed prompts for the Agent. Only in this case will it create exactly what we need.

The LLM handles minor bugs and improvements perfectly, so if you need to try something, test it, or make minor edits, it is best to use the LLM specifically for such tasks.

User talk:Slavinsky

2022-10-12T13:57:26Z

Slavinsky: Created page with "# выбор языка в левой панели влияет только на интерфейс, все диалоги только на одном языке? # русс..."

# выбор языка в левой панели влияет только на интерфейс, все диалоги только на одном языке?
# русского нет и не будет (политическое решение)?
# как создать переменную? и обратится к ней? или только через слот?

Main Page/ru

2022-07-13T07:03:50Z

Slavinsky:

{|
|
'''Lang:'''
|
[[Main Page|en]]
|}
QuBot - это набор инструментов по созданию чат-ботов и виртуальных помощников.
----
;Первые шаги:
* Принципы дизайна бота
* [[Getting Started: Creating Your First Bot/ru|Начало работы: создание вашего первого бота]]
* [[Qubot_NLU/ru|Создание умных ботов (НЛП)]]

; Настройка и программирование:
* [[Qubot Customizing/ru]]
* [[Qubot Google Sheets Setup/ru|Подключение Google таблиц к боту]]
* [[Qubot Script/ru]]
* [[Qubot NLU/ru|Создание умных ботов (NLP)]]
;[[:Category:Integrations|Интеграция]]:
* [[How to add a chatbot to your website/ru|Установка чат-бота на собственный сайт]]
* [[How to integrate WordPress plugin to website/ru|WordPress plugin]]
* [[Qubot Facebook Integration/ru|Facebook ]]
* [[Qubot Telegram Integration/ru|Telegram ]]
* [[Qubot Viber Integration/ru |Viber ]]
* [[Qubot LiveChat Integration/ru|LiveChat]]
* [[Qubot Whatsapp Integration/ru|Whatsapp]]
----
* [[FAQ|Список часто задаваемых вопросов и ответов]]

[[Category:Qubot|*]]
[[Category:ru]]

FAQ/ru

2022-07-06T15:56:04Z

Slavinsky:

{|style="float:right; margin-left:0.8em; clear:right;"
|+[[Main_Page/ru|В начало]]
|
'''Lang:'''
|
|
[[FAQ|en]]
|}

[[File:IconOwl.gif|200px|thumb|right|чаво]]
Это список часто задаваемых вопросов и ответов, относящихся к работе ботов

* [[How to add a chatbot to your website/ru|Как добавить чат-бота на свой сайт]]
* [[How to integrate WordPress plugin to website/ru|Как интегрировать плагин WordPress на сайт]]

[[Category:Qubot]]
[[Category:ru]]

FAQ/ru

2022-07-06T15:53:27Z

Slavinsky:

[[File:IconOwl.gif|200px|thumb|right|чаво]]
Это список часто задаваемых вопросов и ответов, относящихся к работе ботов

* [[How to add a chatbot to your website/ru|Как добавить чат-бота на свой сайт]]
* [[How to integrate WordPress plugin to website/ru|Как интегрировать плагин WordPress на сайт]]

[[Category:Qubot]]
[[Category:ru]]

First Steps

2022-07-06T15:27:10Z

Slavinsky:

;First steps:
* [[Principles of bot design]]
* [[Getting Started: Creating Your First Bot]]
* [[Qubot NLU|Creation of smart bots (NLP)]]

[[Category:Qubot|@]]

Main Page

2022-07-06T15:26:32Z

Slavinsky:

QuBot is a set of tools for creating chatbots and virtual assistants.
----
;First steps:
* [[Principles of bot design]]
* [[Getting Started: Creating Your First Bot]]
* [[Qubot NLU|Creation of smart bots (NLP)]]
; Setup and programming:
* [[Qubot Customizing]]
* [[Qubot Google Sheets Setup]]
* [[Qubot Script]]
;[[:Category:Integrations|Integrations]]:
* [[Channels]]
* [[How to add a chatbot to your website]]
* [[How to integrate WordPress plugin to website|WordPress plugin]]
* [[Qubot Facebook Integration|Facebook ]]
* [[Qubot Telegram Integration|Telegram]]
* [[Qubot Viber Integration|Viber ]]
* [[Qubot LiveChat Integration|LiveChat]]
* [[Qubot Whatsapp Integration|Whatsapp]]
----
* [[FAQ]]

[[Category:Qubot|*]]

FAQ

2022-07-06T15:22:47Z

Slavinsky:

FAQ/ru

2022-07-06T15:21:05Z

Slavinsky: Created page with "чаво Это список часто задаваемых вопросов и ответов, относящихся к работе..."

[[File:IconOwl.gif|200px|thumb|right|чаво]]
Это список часто задаваемых вопросов и ответов, относящихся к работе ботов

* [[How to add a chatbot to your website|Как добавить чат-бота на свой сайт]]
* [[How to integrate WordPress plugin to website|Как интегрировать плагин WordPress на сайт]]

[[Category:Qubot]]
[[Category:ru]]

First Steps

2022-07-06T15:15:53Z

Slavinsky:

;First steps:
* [[Principles of bot design]]
* [[Getting Started: Creating Your First Bot]]

[[Category:Qubot|@]]

Messengers and Integrations

2022-07-06T15:15:11Z

Slavinsky:

* [[Channels]]
* [[How to add a chatbot to your website]]
* [[How to integrate WordPress plugin to website|WordPress plugin]]
* [[Qubot Facebook Integration|Facebook ]]
* [[Qubot Telegram Integration|Telegram]]
* [[Qubot Viber Integration|Viber ]]
* [[Qubot LiveChat Integration|LiveChat]]
* [[Qubot Whatsapp Integration|Whatsapp]]

[[Category:Qubot|@]]

Messengers and Integrations

2022-07-06T15:14:34Z

Slavinsky: Created page with "* Channels * How to add a chatbot to your website * WordPress plugin * Facebook * Qu..."

First Steps

2022-07-06T15:11:24Z

Slavinsky: Created page with ";First steps: * Principles of bot design * Getting Started: Creating Your First Bot Category:Qubot"

;First steps:
* [[Principles of bot design]]
* [[Getting Started: Creating Your First Bot]]

[[Category:Qubot]]

Main Page

2022-06-30T16:06:34Z

Slavinsky:

QuBot is a set of tools for creating chatbots and virtual assistants.
----
;First steps:
* [[Principles of bot design]]
* [[Getting Started: Creating Your First Bot_en|Getting Started: Creating Your First Bot]]
; Setup and programming:
* [[Qubot Customizing]]
* [[Qubot Google Sheets Setup]]
* [[Qubot Script]]
;[[:Category:Integrations|Integrations]]:
* [[Channels]]
* [[How to add a chatbot to your website]]
* [[How to integrate WordPress plugin to website|WordPress plugin]]
* [[Qubot Facebook Integration|Facebook ]]
* [[Qubot Telegram Integration|Telegram]]
* [[Qubot Viber Integration|Viber ]]
* [[Qubot LiveChat Integration|LiveChat]]
* [[Qubot Whatsapp Integration|Whatsapp]]
----
* [[FAQ]]

[[Category:Qubot|*]]

Main Page

2022-06-30T16:05:45Z

Slavinsky: First steps

QuBot is a set of tools for creating chatbots and virtual assistants.
----
;First steps:
* [[Principles of bot design]]
* [[Getting Started: Creating Your First Bot_en|Getting Started: Creating Your First Bot]]
; Setup and programming:
* [[Qubot Customizing]]
* [[Qubot Google Sheets Setup]]
* [[Principles of bot design]]
* [[Qubot Script]]
;[[:Category:Integrations|Integrations]]:
* [[Channels]]
* [[How to add a chatbot to your website]]
* [[How to integrate WordPress plugin to website|WordPress plugin]]
* [[Qubot Facebook Integration|Facebook ]]
* [[Qubot Telegram Integration|Telegram]]
* [[Qubot Viber Integration|Viber ]]
* [[Qubot LiveChat Integration|LiveChat]]
* [[Qubot Whatsapp Integration|Whatsapp]]
----
* [[FAQ]]

[[Category:Qubot|*]]

Principles of bot design

2022-06-30T16:05:23Z

Slavinsky: Category:Qubot

[[Category:Qubot]]
== Principles of bot design ==

By learning the concepts described in this section, you'll become equipped to design a bot that aligns with best practices and capitalizes on lessons learned thus far in this relatively new arena.

The rise of artificial intelligence (AI) continues to drive changes in how enterprises innovate and communicate their business. But for the humans and consumers interfacing with products affected by this technology, what will an AI-empowered future look like? What will it feel like? Empowered by rapidly advancing machine intelligence, product designers are rethinking the fundamental principles that guide the way they work.

The QuBot platform enables businesses and developers to create ChatBot experiences that solve a variety of business problems. By learning the concepts described in this section, you'll become equipped to design a bot that aligns with best practices and capitalizes on lessons learned thus far in this relatively new arena.

== Building a bot ==

If you are building a bot, it is safe to assume that you are expecting users to use it. It is also safe to assume that you are hoping that users will prefer the bot experience over alternative experiences like apps, websites, phone calls, and other means of addressing their particular needs. In other words, your bot is competing for users' time against things like apps and websites. So, how can you maximize the odds that your bot will achieve its ultimate goal of attracting and keeping users? It's simply a matter of prioritizing the right factors when designing your bot.

Users interact with your application through the user interface that you implement. For example, A simple chat window or a mobile app, or even a robot with a voice interface.

== The chatbot's first user interaction ==

'''First impressions matter'''

The very first interaction between the user and bot is critical to the user experience. When designing your bot, keep in mind that there is more to that first message than just saying "hi." When you build an app, you design the first screen to provide important navigation cues. Users should intuitively understand things such as where the menu is located and how it works, where to go for help, what the privacy policy is, and so on. When you design a bot, the user's first interaction with the bot should provide that same type of information. In other words, just saying "hi" won’t be enough.

== Language versus menus ==

'''Consider the following two designs:'''

'''''Design 1'''''
 
[[File:V1.jpg|400px]]

'''''Design 2'''''
 
[[File:V2.jpg|400px]]

Starting the bot with an open-ended question such as "How can I help you?" is generally not recommended. If your bot has a hundred different things it can do, chances are users won’t be able to guess most of them. Your bot didn’t tell them what it can do, so how can they possibly know?
Menus provide a simple solution to that problem. First, by listing the available options, your bot is conveying its capabilities to the user. Second, menus spare the user from having to type too much. They can simply click. Finally, the use of menus can significantly simplify your natural language models by narrowing the scope of input that the bot could receive from the user.

Menus are a valuable tool when designing bots for a great user experience. Don’t dismiss them as not being "smart enough." You may design your bot to use menus while still supporting free-form input. If a user responds to the initial menu by typing rather than by selecting a menu option, your bot could attempt to parse the user's text input.

== Rich user controls ==

Rich user controls are common UI controls such as buttons, images, carousels, and menus that the bot presents to the user and the user engages with to communicate choice and intent. A bot can use a collection of UI controls to mimic an app or can even run embedded within an app. When a bot is embedded within an app or website, it can represent virtually any UI control by leveraging the capabilities of the app that is hosting it.

For decades, application and website developers have relied on UI controls to enable users to interact with their applications. These same UI controls can also be very effective in bots. For example, buttons are a great way to present the user with a simple choice. Allowing the user to communicate "Booking" by clicking a button labeled Booking is easier and quicker than forcing the user to type "Booking." This especially holds true on mobile devices, where the clicking is greatly preferred over typing.

When designing your bot, do not automatically dismiss common UI elements as not being "smart enough." As discussed previously, your bot should be designed to solve the user's problem in the best/quickest/easiest manner possible. Avoid the temptation to start by incorporating natural language understanding, as it is often unnecessary and just introduces unjustified complexity.

== Use Custom Error Message ==

The «Custom Error Message» is like the «Error Page» of your website for your bot users. This message is shown if your bot repeatedly cannot parse a user's input.

Getting Started: Creating Your First Bot/ru

2022-06-30T16:04:56Z

Slavinsky: Category:Qubot

[[Category:Qubot]]
Creating your first Chatbot on the QuData platform.

Channels

2022-06-30T15:39:28Z

Slavinsky: Category:Qubot

[[Category:Qubot]]
== Channels ==
Connect your bot to your desired channels.

By channels, we mean the various platforms that allow people to communicate across the globe, including websites, email, SMS exchanges, messaging apps, etc.

One of the great features of QuBot's service is that from the outset we were determined that our chatbots should be omnichannel. You only have to build a chatbot and it is easily made live on all the different channels.

To connect your bot to your desired channel(s), select your bot and click '''Integrations'''.

Each channel has its own way of connecting bots, but we've made the process straightforward. Follow the steps in the channel settings and your bot will be connected in no time.

When you're done, try sending a message through your channel (such as Facebook Messenger) and see for yourself how powerful our tool is!

== Webchat ==
The Webchat channel is pre-configured for you. You can start to use it right after you have created a bot. Also, you can embed a Webchat on your website or another service.

To launch the Webchat, open the Integrations page and find the WebChat button. Make sure that activation toggle is enabled:

[[File:Webchat.PNG|855 px]]

You need to click '''"Open"''' to start a web chat conversation. Click on the chatbot icon to open it.

== Webchat settings ==
In the settings panel for this channel, enter a link to your site in the field of step 1. Click '''“Save changes”'''.

[[File:Step1.PNG|800px]]

Then, in step 2, click the '''“Copy”''' button.

[[File:Step2_1.PNG|967px]]

Open your webpage and access the HTML. Scroll down to the bottom and paste it.

[[File:Step2_html.PNG|1113px]]

Return to the settings page, and switch the toggle to '''“Active”'''.

Reload your website page. The bot will appear as a button in the bottom right.

Congratulations, the chatbot has been integrated to your WEB channel. It is now available on your company website.

'''Watch this video tutorial "Connecting Channels"'''

https://youtu.be/VPfBYaJJ7jM

* [[How to add a chatbot to your website]]
* [[How to integrate WordPress plugin to website|WordPress plugin]]
* [[Qubot Facebook Integration|Facebook ]]
* [[Qubot Telegram Integration|Telegram]]
* [[Qubot Viber Integration|Viber ]]
* [[Qubot LiveChat Integration|LiveChat]]
* [[Qubot Whatsapp Integration|Whatsapp]]

Main Page/ru

2022-06-30T15:31:51Z

Slavinsky:

{|
|
'''Lang:'''
|
[[Main Page|en]]
|}
QuBot - это набор инструментов по созданию чат-ботов и виртуальных помощников.
----
; Настройка и программирование:
* [[Qubot Customizing/ru]]
* [[Qubot Google Sheets Setup/ru|Подключение Google таблиц к боту]]
* [[Qubot Script/ru]]
;[[:Category:Integrations|Интеграция]]:
* [[How to add a chatbot to your website/ru|Установка чат-бота на собственный сайт]]
* [[How to integrate WordPress plugin to website/ru|WordPress plugin]]
* [[Qubot Facebook Integration/ru|Facebook ]]
* [[Qubot Telegram Integration/ru|Telegram ]]
* [[Qubot Viber Integration/ru |Viber ]]
* [[Qubot LiveChat Integration/ru|LiveChat]]
* [[Qubot Whatsapp Integration/ru|Whatsapp]]
----
* [[FAQ|Список часто задаваемых вопросов и ответов]]

[[Category:Qubot|*]]
[[Category:ru]]

Qubot LiveChat Integration/ru

2022-06-30T15:31:10Z

Slavinsky: Slavinsky moved page Qubot LiveChat Integration RU to Qubot LiveChat Integration/ru without leaving a redirect

[[Category:Qubot]]
[[Category:Integrations|L]]

{{TOCright}}
Интеграция LiveChat с ботом позволяет добавлять живые коммуникации с агентами, поэтому обслуживание клиентов значительно улучшается. Следующая интеграция требует, чтобы у вас была учетная запись LiveChat.

==ШАГ 1==
Войдите в https://www.livechat.com

Если у вас нет аккаунта '''LiveChat''', зарегистрируйтесь на странице https://accounts.livechat.com/signup

==ШАГ 2==
Перейдите к [https://developers.livechat.com/console LiveChat Developers Console], затем в '''My Profile''' и скопируйте '''Organization ID'''.

[[File:21.png|350px]]
[[File:22.png|350px]]

Вставьте его в поле ввода на '''Шаге 2''' в параметрах интеграции.

[[File:23.png|700px]]

==ШАГ 3==
Перейдите к '''My Apps''' и создайте новое приложение.

[[File:24.png|350px]]
[[File:25.png|350px]]
[[File:26.png|350px]]

==ШАГ 4==
Перейдите к разделу '''Building Blocks'''

[[File:27.png|350px]]
[[File:28.png|350px]]

В блоке '''App Authorization''' нажмите кнопку '''Get started'''

[[File:29.png|350px]]

В окне '''Creating the OAuth2.1 Client''' выберите параметр '''Server-side app''' и нажмите кнопку '''Continue'''

[[File:30.png|350px]]

После этого вы перейдете к настройкам '''App Authorization'''. Пожалуйста, не оставляйте эту страницу, пока не закончите '''Шаг 5''' этой инструкции.

==ШАГ 5==
В конфигурации '''App Authorization''' найдите '''Client Id'''.

[[File:31.png|350px]]

Скопируйте его в поле ввода

[[File:32.png|700px]]

В конфигурации '''App Authorization''' найдите '''Client Secret'''.

[[File:33.png|350px]]

Скопируйте его в поле ввода

[[File:34.png|700px]]

Вы не можете восстановить оригинальный '''Client Secret''', поэтому храните его в безопасном месте.
Будьте осторожны, вы не сможете увидеть '''Client Secret''' после перезагрузки страницы. В этом случае вам придется сгенерировать и предоставить нам новый ключ (старый будет сброшен).

Перейдите к разделу '''Redirect URI whitelist''' и добавьте в список такие URL-адреса с помощью кнопки '''Add''':

<syntaxhighlight lang="html">
https://localhost
https://accounts.livechat.com
https://www.livechat.com
https://beta.console.qudata.com
</syntaxhighlight>

[[File:35.png|350px]]
[[File:36.png|350px]]

Перейдите к разделу '''App scopes and API access''' и выберите область доступа '''Select All'''

[[File:37.png|350px]]
[[File:38.png|350px]]
[[File:39.png|350px]]

Нажмите кнопку '''Save changes''' в разделе '''App scopes and API access'''.

Затем, в верхней части страницы '''App Authorization''' нажмите кнопку '''Save changes''', чтобы подготовиться к развертыванию приложения.

[[File:40.png|350px]]

Предоставьте доступ к приложению. Нажмите кнопку '''Разрешить доступ''', чтобы начать быстрый автоматизированный процесс. Обратите внимание, что во время процесса вас могут попросить войти в '''Live Chat'''.

[[File:41.png|350px]]

==ШАГ 6==
В своей программе перейдите к разделу '''Building Blocks''', найдите блок '''Chat Webhooks''' и нажмите кнопку '''Get started'''.

[[File:42.png|350px]]

Скопируйте нижеприведенный ниже '''Webhook URL''' и введите его в соответствующее поле в конфигурации '''Chat Webhooks'''.

<syntaxhighlight lang="html">
https://services.qudata.com/bot/extensions/livechat/api/v1/webhook/
</syntaxhighlight>

[[File:43.png|350px]]

Предоставьте нам '''Secret Key'''. Нажмите кнопку '''Generate'''.

[[File:44.png|350px]]
[[File:45.png|350px]]

Скопируйте секретный ключ в поле ввода

[[File:46.png|700px]]

В разделе '''Webhook triggers''' выберите '''incoming_event'''. Для этого события выберите параметры: '''author type''', '''agent'''

[[File:47.png|350px]]
[[File:48.png|350px]]

Нажмите кнопку '''Save changes'''.

Qubot Script/ru

2022-06-30T15:28:13Z

Slavinsky: Category:ru

{{TOCright}}
== Qubot Script ==

'''''Qubot Script''''' - это язык программирования, используемый для выполнения логических и математических операций при решении задач бота


== Слоты ==

'''Слот''' - это переменная, значение которой доступно во всех состояниях бота. Также значение слота сохраняется, если бота закрыли и продолжили
с ним работать через время.

Объявление слота происходит при первом присваивании в него значений. Например:

<syntaxhighlight lang="js">
a = 7
</syntaxhighlight>
объявляет слот с именем '''a''' и присваивает ему значение '''7'''



== Локальные переменные ==

В отличие от слотов локальные переменные сохраняются только внутри скрипта, где они объявлены. 
Объявление происходит путем добавления перед именем служебного слова '''local''':
<syntaxhighlight lang="js">
local b = 8 // локальная переменная
</syntaxhighlight>

Если локальная переменная объявлена внутри фигурных скобок '''{}''', то и ее значение доступно только там:

<syntaxhighlight lang="js">
local b = 8 // локальная переменная текущего скрипта

if (b == 8)
{
local c = 9 // локальная переменная блока оператора 'if'
print(c) // выведет 9
}

print(b) // выведет 8
print(c) // выдаст ошибку, т.к. тут уже переменная 'с' недоступна
</syntaxhighlight>



== Типы переменных ==

<syntaxhighlight lang="js">
sInt = 7 // целочисленный
sFloat = 7.3 // вещественный
sStr = "hello" // строковый
sArr = [7, 7.3, "hello", sStr] // массив
sDic = { n: 1, s: "Wine" } // словарь
sBool = true // бинарный
sRegExp = /[abc]/ // регулярное выражение
sNone = none // неопределенное значение
</syntaxhighlight>



== Логические операции ==

* '''and''' - логическое ‘И’
* '''or''' - логическое ‘ИЛИ’
* '''not''' - отрицание ‘НЕТ’

Например:

<syntaxhighlight lang="vb">
a = true
b = false
c = true
res = not((a and b) or c)
</syntaxhighlight>



== Арифметические операции ==

* '''+''' - сложение
* '''-''' - вычитание
* '''*''' - умножение
* '''/''' - деление

Например:

<syntaxhighlight lang="js">res = 2+3-4*5+(1.5-0.2/2)</syntaxhighlight>

== Комментарии ==

Комментарии используются для документирования фрагментов скрипта.
Могут быть многострочыми и однострочными:
<syntaxhighlight lang="js">
/*
Пример
многострочного
комментария
*/

a = 2253 // пример однострочного комментария

</syntaxhighlight>

Также разрешается и питоновский стиль комментария:
<syntaxhighlight lang="python">
a = 2253 # пример однострочного комментария
</syntaxhighlight>





== Работа со словарем (объектом) ==

Объявление словаря:

<syntaxhighlight lang="js">dic = { n: 1, s: "Wine" } </syntaxhighlight>

Доступ к значениям словаря:

<syntaxhighlight lang="js">a = dic.n // доступ к полю с именем "n" через точку
a = dic["n"] // доступ к полю с именем "n" через оператор доступа
dic["food"] = "milk" // добавление в словарь пары ключ-значение
</syntaxhighlight>

== Работа с массивами ==

Объявление массива:

<syntaxhighlight lang="js">
arr = [1,2,3] // создает массив с тремя элементами со значениями 1,2,3

</syntaxhighlight>

Доступ к элементам массива:

<syntaxhighlight lang="js">first = arr[0] // получить первый элемент массива
last = arr[-1] // получить последний элемент массива
last = arr[-2] // получить предпоследний элемент массива
arr[0] = 7 // изменить значение первого элемента</syntaxhighlight>
Функции работы с массивом:

'''''push(val1,val2...)''''' - добавить в конец массива элементы со значениями '''val1, val2...'''
<syntaxhighlight lang="js">
arr.push(4) // добавить значение '4' в конец массива
</syntaxhighlight>

'''''unshift(val1,val2...)''''' - добавить в начало массива элементы со значениями '''val1, val2...'''
<syntaxhighlight lang="js">
arr.unshift(0) // добавить значение '0' в начало
</syntaxhighlight>

'''''pop()''''' - удалить последний элемент массива и вернуть его значение

'''''shift()''''' - удалить первый элемент массива и вернуть его значение

'''''slice(start,end)''''' - возвращает часть массива начиная с позиции '''start''' и если указана переменная '''end''', то до нее не включая

'''''splice(start, deleteCount)''''' - удаляет '''deleteCount''' элементов начиная с позиции '''start'''

'''''clear()''''' - очистить массив

Функции работы с массивом словарей:

'''''find(EXPR)''''' - ищет элементы массива, удовлетворяющие условию '''EXPR'''. Найденные элементы возвращаются в виде массива 
Например:
<syntaxhighlight lang="js">
arr = [ // массив из трех объектов с продуктами
{title: "Wine", price: 120},
{title: "Cheese", price: 100},
{title: "Cola", price: 40},
]

local res = arr.find(price > 80) // найти все объекты у которых поле 'price' больше 80 и вернуть их в массиве
print('найдено $res.length:') // выведет количество найденных объектов
print(res) // выведет объекты, удовлетворяющие условию
</syntaxhighlight>

'''''total(EXPR)''''' - применить выражение '''EXPR''' к каждому элементу массива и суммировать все значения 
Например посчитаем сумму товаров в корзине:
<syntaxhighlight lang="js">
arr = [ // массив из трех объектов с продуктами
{title: "Wine", price: 120, amount: 3},
{title: "Pizza", price: 100, amount: 2},
{title: "Cola", price: 40, amount: 3},
]

local res = arr.total(price * amount) // для каждого элемента массива умножаем цену на количество и складываем результат
print("К оплате: $res грн.") // выведет сумму товаров: "К оплате: 680 грн."
</syntaxhighlight>

'''''count(EXPR)''''' - найти количество элементов массива для которых истинно выражение '''EXPR'''
<syntaxhighlight lang="js">
arr = [ // массив из трех объектов с продуктами
{title: "Wine", price: 120, amount: 3},
{title: "Pizza", price: 100, amount: 2},
{title: "Cola", price: 40, amount: 3},
]

local res = arr.count(price < 100) // для каждого элемента массива умножаем цену на количество и складываем результат
print("Количество товаров, дешевле 100 грн: $res") // выведет количество товаров: "Количество товаров, дешевле 100 грн: 1"
</syntaxhighlight>

'''''sort(KEY)''''' - отсортировать массив

Поддерживаются только массивы, в которых все значения одного типа: число или строка для sort() и словарь для sort(key)

<syntaxhighlight lang="js">
list = [1, 3, 2] // массив чисел
str = ["a", "hi", "banana"] // массив строк
arr = [ // массив из словарей с продуктами
{title: "Wine", price: 120, amount: 3},
{title: "Pizza", price: 100, amount: 2},
]

list.sort() // отсортировать массив по возрастанию
str.sort() // отсортировать массив по возрастанию
arr.sort(price) // отсортировать массив объектов по ключу 'price'
// TODO
</syntaxhighlight>

'''''reverse()''''' - перевернуть массив
<syntaxhighlight lang="js">
list = [1, 3, 2] // массив

list.reverse() // [2, 3, 1]
</syntaxhighlight>



== Работа со строками ==

Объявление строковых слотов:

<syntaxhighlight lang="js">
str = "hello" // используя двойные кавычки
str = 'hello' // используя одинарные кавычки</syntaxhighlight>

Операции со строками:

<syntaxhighlight lang="js">
base = 'http://imgs/'
url = base + 'img1.png' // сложение строк
</syntaxhighlight>


Подстановка слотов в строки:
<syntaxhighlight lang="js">
a = 5
str = "a = $a" // вместо $a будет подставлено значение слота a
print(str) // выведет: "a = 5"
</syntaxhighlight>

Вставка выражений в строки:

Выражения можно вставлять в строки, обрамляя их фигурными скобками:
<syntaxhighlight lang="js">
str = "2 + 3 = {2+3}" // вычислит выражение и вставит результат в строку
print(str) // выведет: "2 + 3 = 5"
</syntaxhighlight>

Экранирование спецсимволов '$','{','}' происходит путем добавления наклонной черты '\'
<syntaxhighlight lang="js">
str = "price: 4.99\$ \{sale\}" // вычислит выражение и вставит результат в строку
print(str) // выведет: "price: 4.99$ {sale}"
</syntaxhighlight>

Функции работы со строками:

'''''length''''' - получить длинну строки
<syntaxhighlight lang="js">
str = "hello"
len = str.length // вернет 5 - число символов строки "hello"
</syntaxhighlight>

'''''substring(start,end)''''' - получить подстроку начиная с позиции '''start''' и до позиции '''end''' не включая
<syntaxhighlight lang="js">
str = "http://server/im.png"
substr = str.substring(7,13) // вернет строку "server"
</syntaxhighlight>

'''''search(pattern)''''' - найти позицию первого вхождения '''pattern''', иначе вернуть -1. Аргумент '''pattern''' может быть как строкой
так и регулярным выражением:

<syntaxhighlight lang="js">
str = "apple orange juice"
res = str.search('orange') // вернет позицию строки 'orange': 6
res = str.search(/(orange|juice)/) // вернет позицию строки 'orange' или 'juice'
res = str.search('pizza') // не найдет 'pizza' и вернет -1
</syntaxhighlight>



== Условный оператор ==
Оператор '''if''' используется, если необходимо ветвление логики в зависимости от условия

<syntaxhighlight lang="js">
a = 9
if (a > 7)
{
res = 'a more than 7'
}
else
{
res = 'a less or equal 7'
}</syntaxhighlight>
В данном примере проверяется условие <code>a > 7</code> и если оно истинно, то выполняется первый блок скрипта, окруженный фигурными скобками, иначе выполняется блок после служебного слова '''else'''



== Цикл '''while''' ==

Оператор цикла проверяет условие и пока оно истинно, выполняет код окруженный фигурными скобками

<syntaxhighlight lang="js">a = 7
while (a > 0)
{
a = a - 1
}</syntaxhighlight>
В данном примере скрипт <code>a = a - 1</code> будет выполнятся до тех пор пока значение слота <code>a</code> не станет равным нулю


== Итератор '''for''' ==

Итератор используется для перебора всех значений массива, либо ключей из словаря

<syntaxhighlight lang="js">
arr = [3,2,1]
for(val in arr)
{
print(val)
}
output:
3
2
1
</syntaxhighlight>
В данном примере цикл последовательно перебирает значения массива и заносит их во временную переменную '''val''' соответственно для каждого элемента массива выполняется окруженный фигурными скобками скрипт '''print(val)''' выводящий значение в отладочное окно

Иногда удобно в цикле иметь и индекс массива, для этого перед переменной значения добавляем имя переменной индекса:

<syntaxhighlight lang="js">
arr = [3,2,1]
for(i, val in arr)
{
print("$i: $val")
}
output:
0: 3
1: 2
2: 1
</syntaxhighlight>

Для перебора ключей и значений словаря используется аналогичная конструкция:
<syntaxhighlight lang="js">
arr = {pizza: 100, milk: 20, wine: 120}
for(key, val in arr)
{
print("$key: $val")
}
output:
pizza: 100
milk: 20
wine: 120
</syntaxhighlight>



== Оператор выбора '''switch''' ==

Конструкция '''switch''' заменяет собой сразу несколько '''if'''. Она представляет собой более наглядный способ сравнить выражение сразу с несколькими вариантами.
Имеет один или более блок '''case''' и необязательный блок '''default'''.

<syntaxhighlight lang="js">
a = 'one'
switch(a)
{
case 'one': print('one'); break;
case 'two': print('two'); break;
default: print('def')
}
</syntaxhighlight>

Переменная проверяется на строгое соответствие значению справа от '''case''' и если оно совпадает, то выполняется код до тех пор пока не встретится
оператор '''break'''

Если ни одно из '''case''' не подошло, выполняется код справа от '''default'''



== Оператор '''in''' ==

Оператор '''in''' проверяет есть ли значение в массиве либо является ключём в словаре.

<syntaxhighlight lang="js">
sArr = [7, 7.3, "hello"] // массив
print("hello" in sArr) // вернет true, т.к. значение "hello" присутствует в массиве sArr
sDic = { price: 100, food: "Wine"} // словарь
print("food" in sDic) // вернет true, т.к. ключ "food" присутствует в словаре sDic

</syntaxhighlight>

Переменная проверяется на строгое соответствие значению справа от '''case''' и если оно совпадает, то выполняется код до тех пор пока не встретится
оператор '''break'''

Если ни одно из '''case''' не подошло, выполняется код справа от '''default'''



== Оператор '''button''' ==

'''''button(caption){ SCRIPT }''''' 
Данный оператор добавляет в интерфейс кнопку с текстом '''caption''' в текущее сообщение. После нажатия на кнопку выполняется логика '''SCRIPT'''.
Если '''caption''' - объект, то он должен состоять из двухбуквенных ключей (идентификаторов языка: en, ru,…) со строковыми значения на этих языках.

<syntaxhighlight lang="js">
button('click me') // текст в кнопке
{
// скрипт, который выполнится после нажатия
print('button was clicked!')
step('STATE_AFTER_CLICK')
}
</syntaxhighlight>

При нажатии на кнопку скрипт будет выполнен в контексте локальных переменных на момент добавления данной кнопки, а также в контексте
значений слотов на момент нажатия на кнопку!



== Функции перехода ==

'''''run(state)''''' - выполнить логику шага '''state'''

'''''step(state)''''' - установка шага перехода по умолчанию в значение '''state'''

'''''goto(state)''''' - мгновенный переход в шаг '''state'''



== Функции работы с контентом ==

'''''text(obj)''''' - вывести в текущее сообщение текст. Если '''obj''' - это сторока, то она выводится не зависимо от текущего языка. Если '''obj''' - объект, то он должен состоять из двухбуквенных ключей (идентификаторов языка: en, ru,…) со строковыми значения на этих языках.

<syntaxhighlight lang="js">
text("Hi world!")
text({ en: "Hi world!", ru: "Привет мир!", es: "¡Hola mundo!"})
</syntaxhighlight>

'''''images()''''' - создать новую строку картинок. Каждый последующий вызов image будет добавляться в эту строку, пока снова не будет вызван images().

<syntaxhighlight lang="js">
URL = "https://qudata.com/qubot/im/"
images()
image(URL + "owl_a.png")
image(URL + "owl_b.png") </syntaxhighlight>

'''''image(url, width)''''' - вывести в текущее сообщение картинку. Если '''url''' - это строка, то он используется не зависимо от текущего языка. Если '''url''' - объект, то он должен состоять из двухбуквенных ключей (идентификаторов языка: en, ru,…) со строковыми значения на этих языках.. Необязательный параметр '''width''' указывает насколько в процентах нужно сжать изображение

<syntaxhighlight lang="js">
URL = "https://qudata.com/qubot/im/"
image(URL + "owl_a.png")
image({ en: URL + "en.png", ru: URL + "ru.png"})
</syntaxhighlight>

'''''buttons()''''' - создать новую строку кнопок. Каждый последующий вызов button будет добавляться в эту строку, пока снова не будет вызван buttons().

'''''get_check()''''' - получить массив значений кнопок типа check (1 - нажата, 0 - отжата)

'''''set_check(list)''''' - задать значения кнопок типа check из массива list.

<syntaxhighlight lang="js">
CHECK = [0,1,0]
set_check(CHECK)
</syntaxhighlight>

'''''get_radio()''''' - получить массив значений кнопок типа radio (1 - нажата, 0 - отжата). Единица будет одна.

'''''set_radio(list)''''' - задать значения кнопок типа radio из массива list.



== Отладчные функции ==

'''''print(args)''''' - вывод информации в окно отладки



== Округление ==

'''''floor(val)''''' - округление чисел в меньшую сторону:

<syntaxhighlight lang="js">floor(5.8) // 5
floor(-6.1) // -7</syntaxhighlight>
'''''trunc(val)''''' - отбрасывание дробной части:

<syntaxhighlight lang="js">trunc(5.51) // 5
trunc(-6.99) // -6</syntaxhighlight>
'''''ceil(val)''''' - округление чисел в большую сторону:

<syntaxhighlight lang="js">ceil(5.15) // 6</syntaxhighlight>
'''''round(val, num)''''' - округление '''val''' до '''num''' чисел после запятой:

<syntaxhighlight lang="js">round(3.14159265, 2) // 3.14</syntaxhighlight>


== Случайные числа ==

'''''randint(min,max)''''' - возвращает целое случайное число в диапазоне [min,max].

'''''random()''''' - возвращает случайное вещественное число в диапазоне [0,1].


== Дата и время ==

'''''date(format)''''' - возвращает текущую дату и время в указанном формате. По умолчанию аргумент '''format''' принимает значение: '''%d/%m/%Y %H:%M:%S'''

Поддерживаемые коды форматирования:

* '''%y''' - год без столетия ('22')
* '''%Y''' - год ('2022')
* '''%m''' - месяц
* '''%d''' - день
* '''%H''' - часы
* '''%M''' - минуты
* '''%S''' - секунды

Например:
<syntaxhighlight lang="js">
date() // 17/05/2022 18:16:31 т.е. сейчас
date('%Y.%m.%d %H:%M:%S') // 2022.05.17 18:16:31
</syntaxhighlight>

[[Category:Qubot]]
[[Category:ru]]

Qubot Facebook Integration/ru

2022-06-30T14:08:20Z

Slavinsky: "шаги"

[[Category:Qubot]]
[[Category:Integrations|F]] [[Category:ru]]

{|style="float:right; margin-left:0.8em; clear:right;"
|+[[Main_Page/ru|В начало]]
|
'''Lang:'''
|
[[Qubot Facebook Integration|en]]
|}


{{TOCright}}
== Подключение бота в Facebook ==

Чтобы настроить Facebook Messenger в качестве канала, вам потребуется создать приложение на Facebook, 
включить интеграцию веб-перехватчиков для платформы для отправки и получения сообщений, 
а также подписаться на приложение на странице Facebook. 
== Шаг 1. Создайте приложение ==

Создайте приложение.

Войдите на портал разработчиков Facebook https://developers.facebook.com/ и перейдите в раздел «Мои приложения».
 
 
[[File:FacebookStep1.png|700px]]
 
 
Нажмите кнопку «Создать приложение», затем выберите тип приложения «Бизнес».
 
 
[[File:FacebookStep1_2.png|700px]]
 
 
Введите все необходимые данные для вашего приложения и нажмите «Создать приложение».
 
 
[[File:FacebookStep1_3.png|700px]]
 
 
Ваше приложение будет создано, и вы будете перенаправлены на страницу настройки приложения.

Выберите Messenger и нажмите кнопку «Настроить», чтобы продолжить. Вы будете перенаправлены на страницу настроек.
 
 
[[File:FacebookStep1_4.png|700px]]
 
 

== Шаг 2. Сведения о странице==

Сведения о странице.

Свяжите страницу с приложением и сгенерируйте токен доступа к странице в разделе «Создание токена». Если у вас нет страницы, вы можете создать страницу Facebook здесь - https://www.facebook.com/pages/create .
 
 
[[File:FacebookStep2.png|700px]]
 
 
 
 
[[File:FacebookStep2_2.png|700px]]
 
 
Выберите вашего бота, в левой панели выберите пункт '''Интеграции'''. Далее выберите Messenger.
 
 
[[File:FacebookStep2_6.png|700px]]
 
 
Выберите Шаг 2 и введите этот токен доступа в поле Page Access Token(Токен доступа к странице).
 
 
[[File:FacebookStep2_7.png]] [[File:FacebookStep2_8.png|500px]]
 
 
Перейдите в меню «Основные настройки», затем выберите «Основные настройки», запишите App ID(идентификатор приложения)
и App Secret.
 
 
[[File:FacebookStep2_3.png|700px]]
 
 
Введите их в соответствующие поля на Шаге 2 вашего бота.
 
 
[[File:FacebookStep2_9.png]] [[File:FacebookStep2_10.png]]
 
 
Из своей учетной записи Facebook перейдите на страницу Facebook, которую вы выбрали выше. Найдите меню '''About'''.
 
 
[[File:FacebookStep2_4.png|700px]]
 
 
 
 
[[File:FacebookStep5.png|700px]]
 
 
Скопируйте Page ID и введите их в соответствующие поля на Шаге 2 вашего бота.
 
 
[[File:FacebookStep2_11.png]]
 
 

== Шаг 3. Настройка вебхука ==

Настройка вебхука.

Нажмите переключатель в правом верхнем углу, чтобы активировать канал. После активации канала интеграция с веб-перехватчиком включается автоматически.
 
 
[[File:FacebookStep3.png|700px]]
 
 
Перейдите в меню «Настройки мессенджера» и прокрутите вниз до раздела '''Webhooks section'''.
В разделе '''Webhooks section''' выберите страницу, которую вы использовали для создания токена страницы, и нажмите '''Add subscriptions'''.
Проверьте следующие поля подписки: messages, messages_postbacks, message_deliveries, message_reads.

Сохраните изменения
 
 
[[File:FacebookStep3_2.png|700px]]
 
 
 
 
[[File:Facebook3_3.png|700px]]
 
 

== Шаг 4. утверждение на Facebook ==

Отправьте приложение Facebook на утверждение.
 
 
[[File:FacebookStep4.png|700px]]
 
 
После утверждения вы можете включить канал Facebook Messenger для своего бота.
Для получения дополнительной информации о том, как отправить приложение, посетите https://developers.facebook.com/docs/messenger-platform/app-review#submission .

Category:Ru

2022-06-30T14:01:04Z

Slavinsky: Created page with "Category:Qubot"

[[Category:Qubot]]

Qubot Customizing

2022-06-28T17:09:05Z

Slavinsky: /* Webchat settings */

{{TOCright}}
== Webchat settings ==

A guide to customizing your bot's appearance to match your brand's color scheme.

In customizing the appearance of the bot, those brands that have already developed a color scheme and they need the appearance of the bot to match this scheme will be especially interested.

It's easy to do. Select your bot, click '''Setup''' from the left panel.
----
 
 
[[File:SetupBot.png]]

The following options are available:

== Icons ==

'''Logo''' - an icon that is displayed in the list of bots and the button to start the bot.
 
 
[[File:LogoBot.png]]
 
[[File:BotStartButton.png]]
 
 
'''Agent''' - an icon that is displayed in every bot message.
 
 
[[File:agent.png]]
 
[[File:agentIcon.png]]
 
 
'''Human''' - an icon that is displayed in each message of the user.
 
 
[[File:human.png]]
 
[[File:humanIcon.png]]
 

== Texts ==

'''Bot name''' - the bot's name is displayed in the upper left corner.

'''Agent name''' - the name of the bot from which messages will be sent.

'''Info text''' - text that provides specific information to the user is displayed at the top of the bot next to the bot's name.
 
 
[[File:TextsSetup.png|500px]] [[File:TextsBot.png|300px]]
 

== Size and position ==

'''Size''' - выбор готового размера окна бота: '''''обычный''''', '''''большой''''' и '''''огромный'''''. Для задания своих размеров выберите '''''пользовательский''''' и в полях '''''ширина''''' '''''высота''''' укажите желаемые размеры.
 
 
[[File:sizeBot.png]] [[File:sizeBotWindow.png|300px]]
 
 

'''Position''' - выберите угол для расположения вашего бота. В полях '''''слева''''' '''''вверх''''' установите отступы для окна бота.
 
 
[[File:positionBot.png]] [[File:positionBotWindow.png|500px]]
 
 

== Стили ==
Здесь вы можете выбрать уже готовый стиль бота, который будет соответствовать цветовой схеме вашего бренда.
 
 
[[File:styleBot.png|700px]] [[File:styleBotWindow.png|300px]]
 
 

== Пользовательские ==
Здесь вы можете настроить свой вид бота.

Доступны следующие параметры:

== Окно ==

'''Тень''' - задание тени окна бота. Первый параметр задает перемещение тени вправо и вниз. Второй параметр задает уровень размытия тени. Третий - цвет тени.
 
 
[[File:ShadowSetup.png|400px]] [[File:Shadow.png|300px]]
 

== Заголовок ==
Здесь вы можете отредактировать заголовок окна бота

'''Заполнение''' - фон заголовка окна бота. Первый параметр задает цвет, второй - прозрачность.

'''Рамка''' - рамка окна бота. Первый параметр задает цвет, второй - ширину рамки.

'''Текст''' - имя бота в заголовке. Первый параметр задает цвет шрифта, второй задает размер шрифта, третий - высоту строки шрифта.

'''Инфо''' - надпись в заголовке. Первый параметр задает цвет шрифта, второй задает размер шрифта, третий - высоту строки шрифта.

'''Радиус''' - степень округленности верхних правого и левого углов окна бота.

'''Тень''' - тень заголовка окна бота. Первый параметр задает смещение тени вниз, второй параметр задает степень размытия, третий - цвет.

'''Закрыть''' - задание цветов кнопок обновления и закрытия бота. Первый параметр задает обычный цвет кнопок, второй параметр - цвет кнопок при наведении на них.
 
 
[[File:HeaderSetup.png|400px]] [[File:Header.png]]
 

== Тело бота ==
Здесь вы можете отредактировать область переписки бота

'''Заполнение''' - фон тела бота. Первый параметр задает цвет, второй задает прозрачность, третий - возможность установить текстуру в виде заднего фона.

'''Рамка''' - рамка тела бота. Первый параметр задает цвет, второй - ширину рамки.

'''Время''' - время и дата под сообщением. Первый параметр задает цвет шрифта, второй задает размер шрифта.

'''Тень''' - тень для каждого сообщения. Первый параметр задает смещение тени вниз и правее, второй параметр задает степень размытия, третий - цвет.

'''Радиус''' - степень округленности углов сообщения. Параметр задает степень округленности.

'''Внутренние отступы''' - отступы от текста до стенок внутри сообщения. Параметр задает размер отступов.
 
 
[[File:BodySetup.png|400px]] [[File:Body.png|300px]]
 

== Агент ==
Здесь вы можете отредактировать сообщения агента в чате.

'''Заполнение''' - фон сообщения агента. Параметр задает цвет.

'''Рамка''' - рамка сообщения агента. Первый параметр задает цвет, второй - ширину рамки.

'''Текст''' - текст сообщения агента. Первый параметр задает цвет шрифта, второй задает размер шрифта, третий - высоту строки шрифта.

'''Имя''' - имя агента рядом с сообщением. Первый параметр задает цвет шрифта, второй задает размер шрифта, третий - высоту строки шрифта.

'''Иконка''' - размер иконки агента.
 
 
[[File:AgentCustomSetup.png|400px]] [[File:AgentCustom.png]]
 

== Человек ==
Здесь вы можете отредактировать сообщения пользователя в чате.

'''Заполнение''' - фон сообщения пользователя. Параметр задает цвет.

'''Рамка''' - рамка сообщения пользователя. Первый параметр задает цвет, второй - ширину рамки.

'''Текст''' - текст сообщения пользователя. Первый параметр задает цвет шрифта, второй задает размер шрифта, третий - высоту строки шрифта.

'''Иконка''' - размер иконки пользователя.
 
 
[[File:HumanCustomSetup.png|400px]] [[File:HumanCustom.png]]
 

== Кнопки ==
Здесь вы можете отредактировать кнопки в чате.

'''Текст''' - текст в кнопке. Первый параметр задает цвет шрифта, второй задает размер шрифта, третий - высоту строки шрифта.

'''Рамка''' - рамка вокруг кнопки. Первый параметр задает цвет, второй - ширину рамки.

'''Радиус''' - степень округленности углов кнопок.

'''Заполнение''' - фон кнопок. Первый параметр задает фон в обычном состоянии, второй параметр задает фон при наведении, третий - фон при нажатии на кнопку.

'''Высота''' - высота кнопки.

'''Внешние отступы''' - отступы кнопки от остального контента.
 
 
[[File:ButtonSetup.png|400px]] [[File:Button.png]]
 

== Низ ==
Здесь вы можете отредактировать нижний колонтитул бота.

'''Заполнение''' - фон нижней части бота. Первый параметр задает фон, второй параметр задает прозрачность.

'''Рамка''' - рамка вокруг нижней части бота. Первый параметр задает цвет, второй - ширину рамки.

'''Высота''' - высота нижней части бота.

'''Радиус''' - степень округленности углов нижней части бота.

'''Тень''' - тень нижней части бота. Первый параметр задает смещение тени вверх, второй параметр задает степень размытия, третий - цвет.
 
 
[[File:FooterSetup.png|400px]] [[File:Footer.png]]
 

== Поле ввода ==
Здесь вы можете отредактировать поле ввода.

'''Радиус''' - степень округленности углов поля ввода.

'''Высота''' - высота поля ввода.

'''Внешние отступы''' - отступы поля ввода от остального контента. Первый параметр задает вертикальный отступ, второй - горизонтальный.

'''Заполнение''' - фон поля ввода.

'''Рамка''' - рамка поля ввода. Первый параметр задает цвет, второй - ширину рамки.

'''Текст''' - оформление вводимого текста. Первый параметр задает цвет текста, второй - размерю

'''Отправить''' - оформлении кнопки отправки данных. Первый параметр задает обычный цвет кнопки, второй параметр - цвет кнопок при наведении на нее.
 
 
[[File:InputSetup.png|400px]] [[File:Input.png]]
 

== Кнопка открытия окна чата ==
Здесь вы можете отредактировать кнопку запуска бота.

'''Радиус''' - радиус кнопки запуска бота. Первый параметр задает радиус всей кнопки запуска, второй - радиус иконки бот в кнопке.

'''Рамка''' - рамка кнопки запуска. Первый параметр задает цвет, второй - ширину рамки.
 
 
[[File:OpenButtonSetup.png|400px]] [[File:OpenButton.png]]
 

== Страница(для теста) ==

'''Заполнение''' - фон на странице. Первый параметр задает задний фон под окном бота(пока только в консоли), второй параметр - картинку под окном бота(пока только в консоли).

[[Category:Qubot]]

How to add a chatbot to your website/ru

2022-06-27T13:58:10Z

Slavinsky:

[[Category:ru]]

{|style="float:right; margin-left:0.8em; clear:right;"
|+[[Main_Page/ru|В начало]]
|
'''Lang:'''
|
[[How to add a chatbot to your website|en]]
|}


----
== Установка чат-бота на собственный сайт ==
Для начала нам потребуется выбрать свой чат-бот.

Для этого перейдите в консоль разработки ботов https://console.qudata.com/dashboard/bots и выберите желаемый чат-бот, нажав прямо на него.

[[File:1.png|700px]]

Вы попадаете в раздел редактирования чат-бота.
Нажмите в боковой левой навигационной панели '''Integrations''' и выберите вид канала '''WebChat'''.

[[File:2.png|700px]]

В панели настройки данного канала, введите ссылку на ваш сайт в поле шага 1.

[[File:3.png|700px]]

Затем, в шаге 2, нажмите на кнопку '''Copy'''.

[[File:4.png|700px]]

Откройте свою веб-страницу и получите доступ к HTML. Прокрутите вниз и вставьте скопированный текст в самом конце тега '''</body>'''.

[[File:5.png|700px]]

Вернитесь на страницу настройки и переключите ползунок в активное состояние.

[[File:6.png|700px]]

Перезагрузите страницу вашего сайта. Бот появится в виде кнопки в правом нижнем углу.

[[File:7.png|700px]]

Поздравляем, бот успешно интегрирован в WEB канал. Теперь чат-бот доступен на вашем персональном сайте компании.

[[Category:Integrations]]

Main Page/ru

2022-06-27T13:52:10Z

Slavinsky:

{|
|
'''Lang:'''
|
[[Main Page|en]]
|}
QuBot - это набор инструментов по созданию чат-ботов и виртуальных помощников.
----
; Настройка и программирование:
* [[Qubot Customizing/ru]]
* [[Qubot Google Sheets Setup|Подключение Google таблиц к боту]]
* [[Qubot Script]]
;[[:Category:Integrations|Интеграция]]:
* [[How to add a chatbot to your website/ru|Установка чат-бота на собственный сайт]]
* [[How to integrate WordPress plugin to website/ru|WordPress plugin]]
* [[Qubot Facebook Integration/ru|Facebook ]]
* [[Qubot Telegram Integration/ru|Telegram ]]
* [[Qubot Viber Integration/ru |Viber ]]
* [[Qubot LiveChat Integration|LiveChat]]
* [[Qubot Whatsapp Integration/ru|Whatsapp]]
----
* [[FAQ|Список часто задаваемых вопросов и ответов]]

[[Category:Qubot|*]]
[[Category:ru]]

How to add a chatbot to your website/ru

2022-06-27T13:51:07Z

Slavinsky: Slavinsky moved page How to add a chatbot to your website RU to How to add a chatbot to your website/ru without leaving a redirect

----
== Установка чат-бота на собственный сайт ==
Для начала нам потребуется выбрать свой чат-бот.

Для этого перейдите в консоль разработки ботов https://console.qudata.com/dashboard/bots и выберите желаемый чат-бот, нажав прямо на него.

[[File:1.png|700px]]

Вы попадаете в раздел редактирования чат-бота.
Нажмите в боковой левой навигационной панели '''Integrations''' и выберите вид канала '''WebChat'''.

[[File:2.png|700px]]

В панели настройки данного канала, введите ссылку на ваш сайт в поле шага 1.

[[File:3.png|700px]]

Затем, в шаге 2, нажмите на кнопку '''Copy'''.

[[File:4.png|700px]]

Откройте свою веб-страницу и получите доступ к HTML. Прокрутите вниз и вставьте скопированный текст в самом конце тега '''</body>'''.

[[File:5.png|700px]]

Вернитесь на страницу настройки и переключите ползунок в активное состояние.

[[File:6.png|700px]]

Перезагрузите страницу вашего сайта. Бот появится в виде кнопки в правом нижнем углу.

[[File:7.png|700px]]

Поздравляем, бот успешно интегрирован в WEB канал. Теперь чат-бот доступен на вашем персональном сайте компании.

[[Category:Integrations]]

Main Page/ru

2022-06-27T13:46:37Z

Slavinsky:

{|
|
'''Lang:'''
|
[[Main Page|en]]
|}
QuBot - это набор инструментов по созданию чат-ботов и виртуальных помощников.
----
; Настройка и программирование:
* [[Qubot Customizing/ru]]
* [[Qubot Google Sheets Setup|Подключение Google таблиц к боту]]
* [[Qubot Script]]
;[[:Category:Integrations|Интеграция]]:
* [[How to add a chatbot to your website|Установка чат-бота на собственный сайт]]
* [[How to integrate WordPress plugin to website/ru|WordPress plugin]]
* [[Qubot Facebook Integration/ru|Facebook ]]
* [[Qubot Telegram Integration/ru|Telegram ]]
* [[Qubot Viber Integration/ru |Viber ]]
* [[Qubot LiveChat Integration|LiveChat]]
* [[Qubot Whatsapp Integration/ru|Whatsapp]]
----
* [[FAQ|Список часто задаваемых вопросов и ответов]]

[[Category:Qubot|*]]
[[Category:ru]]

How to integrate WordPress plugin to website/ru

2022-06-27T13:43:36Z

Slavinsky:

[[Category:ru]]
{|style="float:right; margin-left:0.8em; clear:right;"
|+[[Main_Page/ru|В начало]]
|
'''Lang:'''
|
|
[[How to integrate WordPress plugin to website|en]]
|}


{{TOCright}}
== Установка WordPress плагина ==
Инструкция по интеграции WordPress плагина '''QuBot''' на собственный сайт. Данное действие можно выполнить одним из предложенных способов.
Предпочтительнее первый способ, так как он обеспечивает автоматическую проверку актуальной версии плагина.

== 1 Способ ==
Перейдите на страницу админ-панели WordPress на своем сайте. Нажмите '''Plugins''', затем '''Add New'''.

[[File:Screenshot 0.png|700px]]

Справа в верхней части экрана введите в строке поиска слово '''QuBot'''. В результатах поиска отобразиться нужный плагин. Нажмите '''Install Now'''.

[[File:Screenshot 1.png|700px]]

Ждем установки плагина, а затем нажимаем '''Activate'''.

[[File:Screenshot 2.png|700px]]

Плагин установлен на ваш сайт!

== 2 Способ ==
Перейдите в консоль разработки ботов https://console.qudata.com/ и нажмите кнопку '''Integrate'''. Выберите канал связи '''WordPress'''.

[[File:Screenshot 3.png|700px]]

Для скачивания плагина нажмите '''Get Plugin'''.

[[File:Screenshot 4.png|700px]]

Перейдите на страницу админ-панели WordPress на своем сайте. Нажмите '''Plugins''', затем '''Upload Plugin'''.

[[File:Screenshot 5.png|700px]]

Для установки скачанного файла с плагином нажмите '''Choose File'''.

[[File:Screenshot 6.png|700px]]

Выберите скачанный файл с плагином нажав на него, затем '''Open'''.

[[File:Screenshot 7.png|700px]]

Далее нажмите '''Install Now''', дождитесь установки плагина и активируйте его нажатием '''Activate Plugin'''

[[File:Screenshot 8.png|350px]] [[File:Screenshot 9.png|350px]]

Плагин установлен на ваш сайт!

[[Category:Integrations]]

How to integrate WordPress plugin to website/ru

2022-06-27T13:42:19Z

Slavinsky: Slavinsky moved page How to integrate WordPress plugin to website RU to How to integrate WordPress plugin to website/ru without leaving a redirect

{{TOCright}}
== Установка WordPress плагина ==
Инструкция по интеграции WordPress плагина '''QuBot''' на собственный сайт. Данное действие можно выполнить одним из предложенных способов.
Предпочтительнее первый способ, так как он обеспечивает автоматическую проверку актуальной версии плагина.

== 1 Способ ==
Перейдите на страницу админ-панели WordPress на своем сайте. Нажмите '''Plugins''', затем '''Add New'''.

[[File:Screenshot 0.png|700px]]

Справа в верхней части экрана введите в строке поиска слово '''QuBot'''. В результатах поиска отобразиться нужный плагин. Нажмите '''Install Now'''.

[[File:Screenshot 1.png|700px]]

Ждем установки плагина, а затем нажимаем '''Activate'''.

[[File:Screenshot 2.png|700px]]

Плагин установлен на ваш сайт!

== 2 Способ ==
Перейдите в консоль разработки ботов https://console.qudata.com/ и нажмите кнопку '''Integrate'''. Выберите канал связи '''WordPress'''.

[[File:Screenshot 3.png|700px]]

Для скачивания плагина нажмите '''Get Plugin'''.

[[File:Screenshot 4.png|700px]]

Перейдите на страницу админ-панели WordPress на своем сайте. Нажмите '''Plugins''', затем '''Upload Plugin'''.

[[File:Screenshot 5.png|700px]]

Для установки скачанного файла с плагином нажмите '''Choose File'''.

[[File:Screenshot 6.png|700px]]

Выберите скачанный файл с плагином нажав на него, затем '''Open'''.

[[File:Screenshot 7.png|700px]]

Далее нажмите '''Install Now''', дождитесь установки плагина и активируйте его нажатием '''Activate Plugin'''

[[File:Screenshot 8.png|350px]] [[File:Screenshot 9.png|350px]]

Плагин установлен на ваш сайт!

[[Category:Integrations]]

Qubot Whatsapp Integration/ru

2022-06-27T13:40:00Z

Slavinsky:

[[Category:Qubot]]
[[Category:Integrations|W]] [[Category:ru]]
{|style="float:right; margin-left:0.8em; clear:right;"
|+[[Main_Page/ru|В начало]]
|
'''Lang:'''
|
|
[[Qubot Whatsapp Integration|en]]
|}


{{TOCright}}
== Подключение бота в Whatsapp ==

Чтобы получить доступ к WhatsApp Business API через нашу встроенную форму регистрации, следуйте этому руководству.
== Шаг 1 ==



* Перед регистрацией убедитесь, что у вас есть действующий номер телефона. Проверьте, соответствует ли ваш номер телефона критериям здесь - https://developers.facebook.com/docs/whatsapp/phone-numbers#phone-numbers.
* Для телефонных номеров с включенной системой IVR необходимо временно отключить IVR во время процесса регистрации.
== Шаг 2 ==

Перейдите по ссылке на форму регистрации https://hub.360dialog.com/lp/whatsapp/VTOU8QPA, чтобы заполнить заявку на учетную запись WhatsApp Business.

Вам нужно будет указать свой адрес электронной почты (который нельзя подключить к активной учетной записи 360dialog), ваше имя, название вашей компании и пароль, который будет использоваться при входе в 360 Client Hub.
 
 
[[File:WhatsappSetup1.png|700px]]
 
После нажатия кнопки «Принять условия» вы будете перенаправлены на встроенную страницу регистрации.

== Шаг 3 ==

Завершите встроенную регистрацию.

Предупреждение: не держите встроенное всплывающее окно регистрации открытым более 1 часа, иначе сеанс истечет. Прежде чем начать, убедитесь, что у вас есть все предварительные условия из шага 1.

Вам нужно будет войти в свой мета-аккаунт, чтобы двигаться вперед. Важно, чтобы у этой учетной записи Meta был доступ администратора к Meta Business Manager, который будет управлять этой учетной записью WhatsApp.
 
 
[[File:WhatsappSetup2.png|700px]]
 

Активация аккаунта WhatsApp Business API - https://www.youtube.com/watch?v=_WxbHVdC8L4

Выберите вашего бота, в левой панели выберите пункт Интеграции. Далее выберите Whatsapp.
 
 
[[File:WhatsappSetup3.png|700px]]
 
Выберите Шаг 3 и укажите номер телефона вашей компании в поле.
 
 
[[File:WhatsappSetup4.png|400px]]
 
 

Как только встроенная регистрация будет завершена, мы немедленно развернем клиент WhatsApp Business API. Вы автоматически войдете в 360 Client Hub, где сможете сгенерировать свой ключ API.

== Шаг 4 ==

Создайте ключ API и убедитесь, что вы храните его в безопасном месте.
 
 
[[File:WhatsappSetup5.png|500px]]
 
 
 
 
[[File:WhatsappSetup6.png|500px]]
 
 
Выберите вашего бота, в левой панели выберите пункт Интеграции. Далее выберите Whatsapp.Выберите Шаг 3 и скопируйте ключ API в поле ввода.
 
 
[[File:WhatsappSetup7.png|500px]]
 
 

== Шаг 5 ==

Заполните профиль бизнес-менеджера.

Чтобы сохранить подключение к API, вам необходимо добавить свою информацию в раздел бизнес-информации в настройках бизнес-менеджера. Узнайте, как это сделать тут https://www.facebook.com/business/help/257957338156440?id=180505742745347

Main Page/ru

2022-06-27T13:39:20Z

Slavinsky:

{|
|
'''Lang:'''
|
[[Main Page|en]]
|}
QuBot - это набор инструментов по созданию чат-ботов и виртуальных помощников.
----
; Настройка и программирование:
* [[Qubot Customizing/ru]]
* [[Qubot Google Sheets Setup|Подключение Google таблиц к боту]]
* [[Qubot Script]]
;[[:Category:Integrations|Интеграция]]:
* [[How to add a chatbot to your website|Установка чат-бота на собственный сайт]]
* [[How to integrate WordPress plugin to website|WordPress plugin]]
* [[Qubot Facebook Integration/ru|Facebook ]]
* [[Qubot Telegram Integration/ru|Telegram ]]
* [[Qubot Viber Integration/ru |Viber ]]
* [[Qubot LiveChat Integration|LiveChat]]
* [[Qubot Whatsapp Integration/ru|Whatsapp]]
----
* [[FAQ|Список часто задаваемых вопросов и ответов]]

[[Category:Qubot|*]]
[[Category:ru]]

FAQ

2022-06-27T13:35:32Z

Slavinsky:

[[File:IconOwl.gif|200px|thumb|right|чаво]]
Это список часто задаваемых вопросов и ответов, относящихся к работе ботов

* [[How to add a chatbot to your website]]
* [[How to integrate WordPress plugin to website]]
* [[Category:Qubot]]

Qubot Whatsapp Integration En

2022-06-27T13:25:03Z

Slavinsky: Protected "Qubot Whatsapp Integration En" ([Edit=Allow only administrators] (indefinite) [Move=Allow only administrators] (indefinite))

[[Category:Qubot]]
[[Category:Integrations|W]]

{{TOCright}}
== Подключение бота в Whatsapp ==

To get WhatsApp Business API Access through our embedded signup form, follow this guide.
== Step 1 ==



* Before signing up, make sure you have a valid phone number.Check if your phone number meets the criteria here - https://developers.facebook.com/docs/whatsapp/phone-numbers#phone-numbers .
* For phone numbers with an IVR system enabled, the IVR needs to be temporarily disabled during the registration process.
== Step 2 ==

Follow our signup form link https://hub.360dialog.com/lp/whatsapp/VTOU8QPA to fill out the WhatsApp Business Account application.

You will need to provide your email address (which can't be connected to an active 360dialog account), your name, your company name, and the password that will be used in the 360 Client Hub login.
 
 
[[File:WhatsappSetup1.png|700px]]
 
After clicking the Accept Terms button, you will be redirected to the embedded signup page.

== Step 3 ==

Complete the embedded signup.

Precaution: do not keep the embedded signup pop-up open for more than 1 hour, otherwise the session will expire. Please ensure that you have all the prerequisites from Step 1 ready before starting.

You will need to log in to your Meta account to move forward. It's important that this Meta account has admin access to the Meta Business Manager that will manage this WhatsApp account.
 
 
[[File:WhatsappSetup2.png|700px]]
 

WhatsApp Business API Account Activation - https://www.youtube.com/watch?v=_WxbHVdC8L4

Select your bot, in the left pane select Integrations. Next, select Whatsapp.
 
 
[[File:WhatsappSetup3.png|700px]]
 
Select Step 3 and enter your company's phone number in the field.
 
 
[[File:WhatsappSetup4.png|400px]]
 
 

Once the embedded signup is completed, we will immediately deploy the WhatsApp Business API Client. You will be automatically logged into 360 Client Hub, where you can generate your API Key.

== Step 4 ==

Generate an API Key and make sure you store it in a secure location.
 
 
[[File:WhatsappSetup5.png|500px]]
 
 
 
 
[[File:WhatsappSetup6.png|500px]]
 
 
Select your bot, select Integrations in the left pane. Next, select Whatsapp. Select Step 3 and copy the API key in the input field.
 
 
[[File:WhatsappSetup7.png|500px]]
 
 

== Step 5 ==

Complete your business manager profile.

To keep connected to the API, you should add your information in the business info section of business manager settings. Learn how to do it here - https://www.facebook.com/business/help/257957338156440?id=180505742745347

Qubot Whatsapp Integration

2022-06-27T13:24:48Z

Slavinsky: Removed redirect to Qubot Whatsapp Integration/ru

Qubot Whatsapp Integration/ru

2022-06-27T13:24:16Z

Slavinsky: Slavinsky moved page Qubot Whatsapp Integration to Qubot Whatsapp Integration/ru: localization

[[Category:Qubot]]
[[Category:Integrations|W]]

{{TOCright}}
== Подключение бота в Whatsapp ==

Чтобы получить доступ к WhatsApp Business API через нашу встроенную форму регистрации, следуйте этому руководству.
== Шаг 1 ==



* Перед регистрацией убедитесь, что у вас есть действующий номер телефона. Проверьте, соответствует ли ваш номер телефона критериям здесь - https://developers.facebook.com/docs/whatsapp/phone-numbers#phone-numbers.
* Для телефонных номеров с включенной системой IVR необходимо временно отключить IVR во время процесса регистрации.
== Шаг 2 ==

Перейдите по ссылке на форму регистрации https://hub.360dialog.com/lp/whatsapp/VTOU8QPA, чтобы заполнить заявку на учетную запись WhatsApp Business.

Вам нужно будет указать свой адрес электронной почты (который нельзя подключить к активной учетной записи 360dialog), ваше имя, название вашей компании и пароль, который будет использоваться при входе в 360 Client Hub.
 
 
[[File:WhatsappSetup1.png|700px]]
 
После нажатия кнопки «Принять условия» вы будете перенаправлены на встроенную страницу регистрации.

== Шаг 3 ==

Завершите встроенную регистрацию.

Предупреждение: не держите встроенное всплывающее окно регистрации открытым более 1 часа, иначе сеанс истечет. Прежде чем начать, убедитесь, что у вас есть все предварительные условия из шага 1.

Вам нужно будет войти в свой мета-аккаунт, чтобы двигаться вперед. Важно, чтобы у этой учетной записи Meta был доступ администратора к Meta Business Manager, который будет управлять этой учетной записью WhatsApp.
 
 
[[File:WhatsappSetup2.png|700px]]
 

Активация аккаунта WhatsApp Business API - https://www.youtube.com/watch?v=_WxbHVdC8L4

Выберите вашего бота, в левой панели выберите пункт Интеграции. Далее выберите Whatsapp.
 
 
[[File:WhatsappSetup3.png|700px]]
 
Выберите Шаг 3 и укажите номер телефона вашей компании в поле.
 
 
[[File:WhatsappSetup4.png|400px]]
 
 

Как только встроенная регистрация будет завершена, мы немедленно развернем клиент WhatsApp Business API. Вы автоматически войдете в 360 Client Hub, где сможете сгенерировать свой ключ API.

== Шаг 4 ==

Создайте ключ API и убедитесь, что вы храните его в безопасном месте.
 
 
[[File:WhatsappSetup5.png|500px]]
 
 
 
 
[[File:WhatsappSetup6.png|500px]]
 
 
Выберите вашего бота, в левой панели выберите пункт Интеграции. Далее выберите Whatsapp.Выберите Шаг 3 и скопируйте ключ API в поле ввода.
 
 
[[File:WhatsappSetup7.png|500px]]
 
 

== Шаг 5 ==

Заполните профиль бизнес-менеджера.

Чтобы сохранить подключение к API, вам необходимо добавить свою информацию в раздел бизнес-информации в настройках бизнес-менеджера. Узнайте, как это сделать тут https://www.facebook.com/business/help/257957338156440?id=180505742745347

Qubot Whatsapp Integration

2022-06-27T13:24:16Z

Slavinsky: Slavinsky moved page Qubot Whatsapp Integration to Qubot Whatsapp Integration/ru: localization

#REDIRECT [[Qubot Whatsapp Integration/ru]]

Qubot Facebook Integration/ru

2022-06-27T13:21:23Z

Slavinsky:

[[Category:Qubot]]
[[Category:Integrations|F]] [[Category:ru]]

{|style="float:right; margin-left:0.8em; clear:right;"
|+[[Main_Page/ru|В начало]]
|
'''Lang:'''
|
[[Qubot Facebook Integration|en]]
|}


{{TOCright}}
== Подключение бота в Facebook ==

Чтобы настроить Facebook Messenger в качестве канала, вам потребуется создать приложение на Facebook, 
включить интеграцию веб-перехватчиков для платформы для отправки и получения сообщений, 
а также подписаться на приложение на странице Facebook. 
== Шаг 1 ==

Создайте приложение.

Войдите на портал разработчиков Facebook https://developers.facebook.com/ и перейдите в раздел «Мои приложения».
 
 
[[File:FacebookStep1.png|700px]]
 
 
Нажмите кнопку «Создать приложение», затем выберите тип приложения «Бизнес».
 
 
[[File:FacebookStep1_2.png|700px]]
 
 
Введите все необходимые данные для вашего приложения и нажмите «Создать приложение».
 
 
[[File:FacebookStep1_3.png|700px]]
 
 
Ваше приложение будет создано, и вы будете перенаправлены на страницу настройки приложения.

Выберите Messenger и нажмите кнопку «Настроить», чтобы продолжить. Вы будете перенаправлены на страницу настроек.
 
 
[[File:FacebookStep1_4.png|700px]]
 
 

== Шаг 2 ==

Сведения о странице.

Свяжите страницу с приложением и сгенерируйте токен доступа к странице в разделе «Создание токена». Если у вас нет страницы, вы можете создать страницу Facebook здесь - https://www.facebook.com/pages/create .
 
 
[[File:FacebookStep2.png|700px]]
 
 
 
 
[[File:FacebookStep2_2.png|700px]]
 
 
Выберите вашего бота, в левой панели выберите пункт '''Интеграции'''. Далее выберите Messenger.
 
 
[[File:FacebookStep2_6.png|700px]]
 
 
Выберите Шаг 2 и введите этот токен доступа в поле Page Access Token(Токен доступа к странице).
 
 
[[File:FacebookStep2_7.png]] [[File:FacebookStep2_8.png|500px]]
 
 
Перейдите в меню «Основные настройки», затем выберите «Основные настройки», запишите App ID(идентификатор приложения)
и App Secret.
 
 
[[File:FacebookStep2_3.png|700px]]
 
 
Введите их в соответствующие поля на Шаге 2 вашего бота.
 
 
[[File:FacebookStep2_9.png]] [[File:FacebookStep2_10.png]]
 
 
Из своей учетной записи Facebook перейдите на страницу Facebook, которую вы выбрали выше. Найдите меню '''About'''.
 
 
[[File:FacebookStep2_4.png|700px]]
 
 
 
 
[[File:FacebookStep5.png|700px]]
 
 
Скопируйте Page ID и введите их в соответствующие поля на Шаге 2 вашего бота.
 
 
[[File:FacebookStep2_11.png]]
 
 

== Шаг 3 ==

Настройка вебхука.

Нажмите переключатель в правом верхнем углу, чтобы активировать канал. После активации канала интеграция с веб-перехватчиком включается автоматически.
 
 
[[File:FacebookStep3.png|700px]]
 
 
Перейдите в меню «Настройки мессенджера» и прокрутите вниз до раздела '''Webhooks section'''.
В разделе '''Webhooks section''' выберите страницу, которую вы использовали для создания токена страницы, и нажмите '''Add subscriptions'''.
Проверьте следующие поля подписки: messages, messages_postbacks, message_deliveries, message_reads.

Сохраните изменения
 
 
[[File:FacebookStep3_2.png|700px]]
 
 
 
 
[[File:Facebook3_3.png|700px]]
 
 

== Шаг 4 ==

Отправьте приложение Facebook на утверждение.
 
 
[[File:FacebookStep4.png|700px]]
 
 
После утверждения вы можете включить канал Facebook Messenger для своего бота.
Для получения дополнительной информации о том, как отправить приложение, посетите https://developers.facebook.com/docs/messenger-platform/app-review#submission .

Main Page/ru

2022-06-27T13:20:05Z

Slavinsky:

{|
|
'''Lang:'''
|
[[Main Page|en]]
|}
QuBot - это набор инструментов по созданию чат-ботов и виртуальных помощников.
----
; Настройка и программирование:
* [[Qubot Customizing/ru]]
* [[Qubot Google Sheets Setup|Подключение Google таблиц к боту]]
* [[Qubot Script]]
;[[:Category:Integrations|Интеграция]]:
* [[How to add a chatbot to your website|Установка чат-бота на собственный сайт]]
* [[How to integrate WordPress plugin to website|WordPress plugin]]
* [[Qubot Facebook Integration/ru|Facebook ]]
* [[Qubot Telegram Integration/ru|Telegram ]]
* [[Qubot Viber Integration/ru |Viber ]]
* [[Qubot LiveChat Integration|LiveChat]]
* [[Qubot Whatsapp Integration|Whatsapp]]
----
* [[FAQ|Список часто задаваемых вопросов и ответов]]

[[Category:Qubot|*]]
[[Category:ru]]

Main Page

2022-06-27T13:17:52Z

Slavinsky:

QuBot is a set of tools for creating chatbots and virtual assistants.
----
; Setup and programming:
* [[Qubot Customizing]]
* [[Qubot Google Sheets Setup]]
* [[Qubot Script]]
;[[:Category:Integrations|Integrations]]:
* [[How to add a chatbot to your website]]
* [[How to integrate WordPress plugin to website|WordPress plugin]]
* [[Qubot Facebook Integration|Facebook ]]
* [[Qubot Telegram Integration|Telegram]]
* [[Qubot Viber Integration|Viber ]]
* [[Qubot LiveChat Integration|LiveChat]]
* [[Qubot Whatsapp Integration|Whatsapp]]
* [[Qubot Whatsapp Integration En|Whatsapp En]]
----
* [[FAQ]]

[[Category:Qubot|*]]

Qubot Facebook Integration

2022-06-27T13:16:37Z

Slavinsky: Removed redirect to Qubot Facebook Integration/ru

[[Category:Qubot]]
[[Category:Integrations|F]]

{{TOCright}}
== Connecting a bot to Facebook ==

To set up Facebook Messenger as a channel, developers will need to create an app on Facebook, enable webhook integration for the platform to send and receive messages, and subscribe the app to a Facebook page.
== Step 1 ==

Create an App.

Login to the Facebook developer portal(https://developers.facebook.com/) and go to My Apps.
 
 
[[File:FacebookStep1.png|700px]]
 
 
Click the Create App button, then select an app type Business.
 
 
[[File:FacebookStep1_2.png|700px]]
 
 
Enter all the relevant details for your app and click Create App.
 
 
[[File:FacebookStep1_3.png|700px]]
 
 
Your App will be created and you will be redirected to the App setup page.

Choose Messenger and click the Set up button to continue. You will be redirected to the Settings page.
 
 
[[File:FacebookStep1_4.png|700px]]
 
 

== Step 2 ==

Get Page Details.

Associate a page with the app and generate the Page Access Token from the Token Generation section. If you do not have a page, you can create a Facebook page here - https://www.facebook.com/pages/create .
 
 
[[File:FacebookStep2.png|700px]]
 
 
 
 
[[File:FacebookStep2_2.png|700px]]
 
 
Select your bot, in the left pane select Integrations. Next, select Messenger.
 
 
[[File:FacebookStep2_6.png|700px]]
 
 
Select Step 2 and enter your access token in the field.
 
 
[[File:FacebookStep2_7.png]] [[File:FacebookStep2_8.png|500px]]
 
 
Navigate to the Main Settings menu then select Basic Settings, capture the App ID and App Secret and enter it below.
 
 
[[File:FacebookStep2_3.png|700px]]
 
 
Enter them into the appropriate fields in Step 2 of your bot.
 
 
[[File:FacebookStep2_9.png]] [[File:FacebookStep2_10.png]]
 
 
From your Facebook account, navigate to the Facebook page you have selected above. Locate the About menu.
 
 
[[File:FacebookStep2_4.png|700px]]
 
 
 
 
[[File:FacebookStep5.png|700px]]
 
 
Copy Page ID and enter it below and enter them into the appropriate fields in Step 2 of your bot.
 
 
[[File:FacebookStep2_11.png]]
 
 

== Step 3 ==

Setup Webhook.

Enable this channel to start the webhook setup process. Click the switch in the top right to activate the channel. Once the channel is activated, the webhook integration is enabled automatically.
 
 
[[File:FacebookStep3.png|700px]]
 
 
Navigate to the Messenger Settings menu and scroll down to the Webhooks section. Under the Webhooks section, select the page you have used to generate the page token and click on Add subscriptions. Check the following subscription fields: messages, messaging_postbacks, message_deliveries, message_reads.

Save the changes.
 
 
[[File:FacebookStep3_2.png|700px]]
 
 
 
 
[[File:Facebook3_3.png|700px]]
 
 

== Step 4 ==

Submit the Facebook app for approval.
 
 
[[File:FacebookStep4.png|700px]]
 
 
Once approved, you can enable the Facebook Messenger channel for your bot. For more info on how to submit the app, visit here - https://developers.facebook.com/docs/messenger-platform/app-review#submission .

Qubot Facebook Integration En

2022-06-27T13:16:21Z

Slavinsky: Protected "Qubot Facebook Integration En" ([Edit=Allow only administrators] (indefinite) [Move=Allow only administrators] (indefinite))

Qubot Facebook Integration/ru

2022-06-27T13:14:53Z

Slavinsky: Slavinsky moved page Qubot Facebook Integration to Qubot Facebook Integration/ru: localization

[[Category:Qubot]]
[[Category:Integrations|F]]

{{TOCright}}
== Подключение бота в Facebook ==

Чтобы настроить Facebook Messenger в качестве канала, вам потребуется создать приложение на Facebook, 
включить интеграцию веб-перехватчиков для платформы для отправки и получения сообщений, 
а также подписаться на приложение на странице Facebook. 
== Шаг 1 ==

Создайте приложение.

Войдите на портал разработчиков Facebook https://developers.facebook.com/ и перейдите в раздел «Мои приложения».
 
 
[[File:FacebookStep1.png|700px]]
 
 
Нажмите кнопку «Создать приложение», затем выберите тип приложения «Бизнес».
 
 
[[File:FacebookStep1_2.png|700px]]
 
 
Введите все необходимые данные для вашего приложения и нажмите «Создать приложение».
 
 
[[File:FacebookStep1_3.png|700px]]
 
 
Ваше приложение будет создано, и вы будете перенаправлены на страницу настройки приложения.

Выберите Messenger и нажмите кнопку «Настроить», чтобы продолжить. Вы будете перенаправлены на страницу настроек.
 
 
[[File:FacebookStep1_4.png|700px]]
 
 

== Шаг 2 ==

Сведения о странице.

Свяжите страницу с приложением и сгенерируйте токен доступа к странице в разделе «Создание токена». Если у вас нет страницы, вы можете создать страницу Facebook здесь - https://www.facebook.com/pages/create .
 
 
[[File:FacebookStep2.png|700px]]
 
 
 
 
[[File:FacebookStep2_2.png|700px]]
 
 
Выберите вашего бота, в левой панели выберите пункт '''Интеграции'''. Далее выберите Messenger.
 
 
[[File:FacebookStep2_6.png|700px]]
 
 
Выберите Шаг 2 и введите этот токен доступа в поле Page Access Token(Токен доступа к странице).
 
 
[[File:FacebookStep2_7.png]] [[File:FacebookStep2_8.png|500px]]
 
 
Перейдите в меню «Основные настройки», затем выберите «Основные настройки», запишите App ID(идентификатор приложения)
и App Secret.
 
 
[[File:FacebookStep2_3.png|700px]]
 
 
Введите их в соответствующие поля на Шаге 2 вашего бота.
 
 
[[File:FacebookStep2_9.png]] [[File:FacebookStep2_10.png]]
 
 
Из своей учетной записи Facebook перейдите на страницу Facebook, которую вы выбрали выше. Найдите меню '''About'''.
 
 
[[File:FacebookStep2_4.png|700px]]
 
 
 
 
[[File:FacebookStep5.png|700px]]
 
 
Скопируйте Page ID и введите их в соответствующие поля на Шаге 2 вашего бота.
 
 
[[File:FacebookStep2_11.png]]
 
 

== Шаг 3 ==

Настройка вебхука.

Нажмите переключатель в правом верхнем углу, чтобы активировать канал. После активации канала интеграция с веб-перехватчиком включается автоматически.
 
 
[[File:FacebookStep3.png|700px]]
 
 
Перейдите в меню «Настройки мессенджера» и прокрутите вниз до раздела '''Webhooks section'''.
В разделе '''Webhooks section''' выберите страницу, которую вы использовали для создания токена страницы, и нажмите '''Add subscriptions'''.
Проверьте следующие поля подписки: messages, messages_postbacks, message_deliveries, message_reads.

Сохраните изменения
 
 
[[File:FacebookStep3_2.png|700px]]
 
 
 
 
[[File:Facebook3_3.png|700px]]
 
 

== Шаг 4 ==

Отправьте приложение Facebook на утверждение.
 
 
[[File:FacebookStep4.png|700px]]
 
 
После утверждения вы можете включить канал Facebook Messenger для своего бота.
Для получения дополнительной информации о том, как отправить приложение, посетите https://developers.facebook.com/docs/messenger-platform/app-review#submission .

Qubot Facebook Integration

2022-06-27T13:14:53Z

Slavinsky: Slavinsky moved page Qubot Facebook Integration to Qubot Facebook Integration/ru: localization

#REDIRECT [[Qubot Facebook Integration/ru]]

Qubot Viber Integration/ru

2022-06-27T10:35:26Z

Slavinsky:

[[Category:Qubot]]
[[Category:Integrations|V]] [[Category:ru]]

{|style="float:right; margin-left:0.8em; clear:right;"
|+[[Main_Page/ru|В начало]]
|
'''Lang:'''
|
[[Qubot_Viber_Integration|en]]
|}


{{TOCright}}
== Подключение бота в Viber ==

Для подключения бота следуйте шагам описанным ниже:
== Шаг 1 ==

Загрузите официальное приложение Viber для своего телефона: https://www.viber.com/download
== Шаг 2 ==

Создайте аккаунт Viber: https://account.viber.com/en/create-account
 
 
[[File:ViberStep2.png|700px]]
 
 

== Шаг 3 ==

Войдите в админ панель Viber. 
Перейдите на https://partners.viber.com и введите свой номер телефона.
 
 
[[File:ViberStep3.png|700px]]
 
 
Вам придет сообщение Viber с кодом, который нужно ввести в поле ввода.

== Шаг 4 ==

Создайте учетную запись бота.

Заполните следующую форму, примите Условия и положения, а затем нажмите '''«Создать учетную запись бота»'''. 
Это новый аккаунт Viber, привязанный к вашему номеру телефона (как администратора), в котором будет работать бот.
 
 
[[File:ViberStep4.png|700px]]
 
 

== Шаг 5 ==

После создания учетной записи вы получите приватный токен.
 
 
[[File:ViberStep5.png|700px]]
 
 
Выберите вашего бота, в левой панели выберите пункт '''Интеграции'''. Далее выберите Viber. 
 
 
[[File:ViberStep5_2.png|700px]]
 
 
Выберите Шаг 5 и введите в поле токен.
 
 
[[File:ViberStep5_3.png|700px]]
 
 

== Шаг 6 ==

Viber позволяет настроить приветственное сообщение для вашего профиля бота, которое отображается пользователям при первом взаимодействии с вашим ботом. 
Выберите вашего бота, в левой панели выберите пункт '''Интеграции'''. Далее выберите Viber. 
 
 
[[File:ViberStep5_2.png|700px]]
 
 
Выберите Шаг 6 и введите в поле сообщение.
 
 
[[File:ViberStep6.png|700px]]