diff --git a/docs/.vuepress/components/UpilBot.vue b/docs/.vuepress/components/UpilBot.vue
index 12f650d..1b2638e 100644
--- a/docs/.vuepress/components/UpilBot.vue
+++ b/docs/.vuepress/components/UpilBot.vue
@@ -40,14 +40,19 @@
                 :locale="locale"
                 :i18n="i18n"
               >
-                <template v-slot:external="{allNodes, currentNode, scenarioEnded, placeholderText}">
+                <template
+                  v-slot:external="{allNodes, currentNode, scenarioEnded, placeholderText, state}"
+                >
                   <div class="pl-1" id="bottom-bar" v-if="currentNode && !scenarioEnded">
                     <component
                       v-bind:is="currentNode.componentType"
                       v-bind="currentNode.node"
+                      :state="state"
                       :placeholderText="placeholderText"
                       :locale="locale"
                       :rules="calculateRules(currentNode)"
+                      :rawNode="currentNode.rawNode"
+                      @consume="onConsume"
                     />
                   </div>
                 </template>
@@ -129,6 +134,9 @@ export default {
     },
   },
   methods: {
+    onConsume({ event, value }) {
+      this.upil.consume(event, value);
+    },
     getScenario() {
       const preTag = this.$slots.default[0].children.find(
         (c) => c.tag === "pre"
diff --git a/docs/widgets/README.md b/docs/widgets/README.md
index 1981784..f677fae 100644
--- a/docs/widgets/README.md
+++ b/docs/widgets/README.md
@@ -4,15 +4,26 @@ The Vue UPIL plugin comes with several built-in widgets. Some widgets are only a
 
 ## Date 
 
-::: warning
-The `date` widget is currently only available in form-mode based scripts
-:::
-
 The `date` widget allows users to select a date from a calendar. To use it in your script, use a `TEMPLATE date` entity.
 <br/>
 <br/>
 
-<FormMode>
+<UpilBot>
+```
+DIALOG birthday
+  TEMPLATE date
+    {
+      formText: "Birthdate"
+    }
+    "What is your birthday?"
+    >>birthday
+  /TEMPLATE
+/DIALOG
+RUN birthday
+```
+</UpilBot>
+
+<FormMode hideScript>
 ```
 DIALOG birthday
   TEMPLATE date
@@ -44,15 +55,26 @@ RUN birthday
 
 ## Date-time
 
-::: warning
-The `date-time` widget is currently only available in form-mode based scripts
-:::
-
 The `date-time` widget allows users to select a date from a calendar, and a time on that date. To use it in your script, use a `TEMPLATE date-time` entity.
 <br/>
 <br/>
 
-<FormMode>
+<UpilBot>
+```
+DIALOG birthday
+  TEMPLATE date-time
+    {
+      formText: "Birthday party"
+    }
+    "When is your birthday party?"
+    >>birthday
+  /TEMPLATE
+/DIALOG
+RUN birthday
+```
+</UpilBot>
+
+<FormMode hideScript>
 ```
 DIALOG birthday
   TEMPLATE date-time
@@ -84,15 +106,29 @@ RUN birthday
 
 ## Range
 
-::: warning
-The `range` widget is currently only available in form-mode based scripts
-:::
-
 The `range` widget lets users choose a number between `min` and `max` values that the scriptwriter chooses. The scriptwriter can also choose an optional `unit` label.
 <br/>
 <br/>
 
-<FormMode>
+<UpilBot>
+```
+DIALOG minutesQuestion
+  TEMPLATE range
+    {
+      formText: "Minutes",
+      min: 10,
+      max: 20,
+      unit: "分"
+    }
+  "How long did it take?"
+  >>minutes
+  /TEMPLATE
+/DIALOG
+RUN minutesQuestion
+```
+</UpilBot>
+
+<FormMode hideScript>
 ```
 DIALOG minutesQuestion
   TEMPLATE range