Skip to main content

How to create a simple bot in J‑Graph

In this tutorial, you will create a simple chatbot that will:

  1. Offer to place an order
  2. Request user contacts
  3. Confirm the order

Create a script​

To start working in J‑Graph:

  1. Create a new JAICP project.
  2. On the control panel to the left, select Editor → J‑Graph.

You will see the canvas: the primary J‑Graph workspace. Move around the canvas by holding down the right mouse button or selecting any unoccupied space on the canvas with your finger on the touchpad. Zoom in or out using the mouse wheel or by scrolling with your fingers on the touchpad.

The script on the canvas consists of states. States are the screens with bot reactions and expected user responses to them. The script already has several states:

  • The first required state of the script — /Start. It is marked with a special flag.
  • The /Hello and /Bye states.
  • The required /NoMatch state. It includes the bot response to unrecognized phrases.
  • The /Match state — the bot reaction to phrases that are recognized but not handled in the script.
tip
The /Hello, /Bye and /Match states are not used in this tutorial, so you can safely remove them.

Script states​

State 1. Bot greeting and menu​

First, change the greeting to a phrase with information about the company, add a button menu and a link to your website:

  1. Go to the /Start state.
  2. In the Reactions section, select the Text block and change the greeting in the Bot phrase field to the following: Hi! I’m a bot assistant. How can I help you?
  3. Select Add reaction below.
  4. In the menu on the right, select Button group → Add button.
  5. Enter the first button text: Make an order.
  6. Select Add button and enter the second button text: Visit our website.
  7. Activate the Button press action option → Go to link and paste the company’s website link in the https://example.com format.
  8. Click Save.

Start state

State 2. Order information request​

Add a new state for requesting information from the user:

  1. Click in the top left corner.

  2. Enter the name of the state: Information request.

  3. Click Select an action below → Request text.

    tip
    When you select an action, the new state will be created automatically.

  4. In the menu on the right, fill in the fields:

    • Prompt — enter the following text: Specify the product you would like to order. Please leave your contact info.

    • Variable name — enter a value named order.

      tip
      Information from the user will be stored in the $session.order variable. You can set up sending its value to the manager when finalizing the script.

  5. Click Save.

Information request state

State 3. Order confirmation​

Add a message on receiving the information:

  1. Add a new state called Order confirmation.
  2. Select Add block below → Text.
  3. In the Bot phrase field, enter the following text: Your request: “{{$session.order}}”. Thank you for the information! Our manager will contact you shortly.

Order confirmation state

State 4. Bot response to unrecognized phrases​

Now change the bot response to unrecognized phrases to one that suits you better:

  1. Go to the /NoMatch state.
  2. In the Reactions section, select the Text block and change the greeting in the Bot phrase field to the following: Sorry, I didn’t understand that. Please rephrase your message.

Answer to an unrecognized phrase

Labels​

You can annotate states with colored labels. This will allow you to evaluate bot performance results and improve its logic.

Hover over the /Order confirmation state, click , and add a label named Order completed. In the bot analytics, you will see the number of users who left their contact information.

Now all the script states have been created, and you need to add transitions through them. They are called links.

To create a link from a state, place the cursor on  in the block with the bot reaction or phrase, hold down the left mouse button or double-tap the touchpad, then hold and drag the line to the desired state.

  1. Connect the Make an order button in the /Start state with the /Information request state.
  2. Connect the Text request in the /Information request state to the /Order confirmation state.
caution
The required /NoMatch state is activated on any unrecognized user phrase, so it should not be connected with any other states.

The script with the links will look like this:

Simple bot at J‑Graph

Testing and deployment​

To test the script, click Test the bot in the top bar of the screen. The test widget will appear on the right side of the screen. You can simulate a conversation between the bot and a user in this widget.

tip
During testing, you can assess visually how the dialog follows the script. The current state will be marked with a yellow label, and all the states the bot follows will be highlighted.

When you’re done testing, save the script using → Save script in the top left corner, then deploy the bot in one of the channels to communicate with your users. It can be a widget on a website, a chat in a messenger, or a voice assistant.

caution
Before you deploy your bot, read the documentation on connecting channels, since different channels have their own features and restrictions.

To deploy your bot to a channel:

  1. On the control panel on the left, select Channels.
  2. In the Inbound section, click Connect channel and select the channel where the bot will operate.
  3. In the new modal window, enter the name of the channel and complete the configuration.

The connection status will be displayed next to the channel name. The Works status means the bot has started operating in the channel.

tip
You can see dialogs with users in the Analytics section → Dialogs. Analyzing dialogs will help you improve the script logic.

What’s next​

You can improve your project in the visual editor:

  • Change bot reactions: for example, add more information about your company.
  • Make the bot’s speech more natural: diversify bot replies using the Random answer reaction.
  • Add more expected user phrases to states.
  • Consider handling unrecognized user phrases and channel-specific events, as well as possible errors.
  • Add an interactive part: the bot can send images and audio files, or receive files from users.
  • Expand the bot logic: add an action block for sending order information to the manager via SMS or email.
tip
Once all changes are made, tested, and saved, deploy the bot in the channel. The bot will start communicating with users according to the new version of the script.