HTML USSD

Appearance

General Rules ​

To simulate USSD flows, HTML-USSD expects HTML files to follow strict structure rules.

This ensures a consistent and simple experience, similar to real USSD menus on mobile phones.

HTML Structure Requirements ​

Each HTML file must:

  • Contain a <html> tag as the root element.
  • Include a <head> section with:
    • A <title> tag to define the screen title.
  • Use the <body> section to define the screen content, which may include:

IMPORTANT

  • A page cannot include both <a> links and a <form>.
  • All Text or Paragraph must be before <a> or <form>.
  • If the <body> contains neither <a> nor a <form>, it is considered an end screen. This means the program ends, and no user input is expected.

Example: A Simple Menu ​

html
<html>
  <head>
    <title>Main Page</title>
  </head>
  <body>
    Welcome to html-usdd
    <p>This is a paragraph</p>
    <a href="http://localhost:8888/payment">Payment</a>
    <a href="http://localhost:8888/form-get">Form with Get</a>
  </body>
</html>
Result
bash
+=============+
|  Main Page  |
+=============+

Welcome to html-usdd
This is a paragraph

1. Payment
2. Form with Get

------------------------
[#] >

Example: A Form Input ​

html
<html>
  <head>
    <title>Form get</title>
  </head>
  <body>
    This is form with get
    <form action="http://localhost:8888/handle-text" method="get">
      <input type="text" name="text" placeholder="Enter text" />
    </form>
  </body>
</html>
Result
bash
+============+
|  Form get  |
+============+

This is form with get

Entrer un text

------------------------
0. Back
00. Home
[abc] >

Example: An end screen ​

html
<html>
  <head>
    <title>End screen</title>
  </head>
  <body>
    This is and screen
  </body>
</html>
Result
bash
+==============+
|  End screen  |
+==============+

This is and screen

By following these simple HTML rules, you can create complex USSD flows easily and preview them in your terminal.

Ready to launch your first flow? Learn about CLI usage.