{"id":9979,"date":"2024-04-27T21:28:09","date_gmt":"2024-04-27T13:28:09","guid":{"rendered":"https:\/\/docs.franschat.com\/docs\/knowledge\/facebook-tools\/bot-manager-9731\/webform-builder\/"},"modified":"2024-10-14T18:10:42","modified_gmt":"2024-10-14T10:10:42","slug":"webform-builder","status":"publish","type":"docs","link":"https:\/\/docs.franschat.com\/zh\/docs\/knowledge\/facebook-tools\/bot-manager\/webform-builder\/","title":{"rendered":"<\/i>Webform builder"},"content":{"rendered":"
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t

How it works<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t

The Messenger Platform allows you to open a standard webview, where you can load webpages inside Messenger. This lets you offer experiences and features that might be difficult to offer with message bubbles, such as picking products to buy, seats to book, or dates to reserve.<\/p>

Webform builder<\/h2>

Go to \r\n Messenger Bot <\/span> Webform builder <\/span> <\/span>\r\n \u00a0and you will see all your existing webview form you built so far.<\/p>

  • <\/i>\u00a0icon refers webview preview to know how it will look like and to copy webview url<\/li>
  • <\/i>\u00a0icon refers webview report to view form details and submitted form data<\/li>
  • <\/i>\u00a0Export Form Data<\/li>
  • <\/i>\u00a0icon refers webview edit<\/li>
  • <\/i>\u00a0icon refers webview delete<\/li><\/ul>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t

    Create New Webform<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t\t\t

    To create a new webview form simply click “New form” button. This is a drag and drop form builder. Choose form name, title, page. You choose optional label and reply template. When people will submit the form they will be assigned to the selected labels and also they will receive the inbox reply.<\/p>

    Design your form easily by dragging the elements you want from right sidebar. Your form must have a submit button.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

    \n\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t\t\t

    For each form field, you can edit it by clicking the pencil icon<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

    \n\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t\t\t

    If it is a special field, such as email or mobile number, you can select the corresponding field in Type.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

    \n\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t\t\t

    Finally, each form needs to have a button, click “Save” when you are done<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

    \n\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t

    How To Use The Webform<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t\t\t

    Click\u00a0<\/i> icon and you can see your Webform preview, copy the browser URL, this is the Webform URL.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

    \n\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t\t\t

    Now it’s time to use this Webform in bot settings. Go to \r\n Bot Manager <\/span> Bot Reply <\/span> <\/span>\r\n , create a new flow or edit an existing bot settings. Webform works with text with buttons, generic template, carousel & media. Choose button type and choose Webform and put the copied URL.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

    \n\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t\t\t

    This will how this will look like in bot live action :<\/strong><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

    \n\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t
    \n\t\t\t
    \n\t\t\t<\/i>\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t
    \n\t\t\t
    \n\t\t\t<\/i>\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t
    \n\t\t\t
    \n\t\t\t<\/i>\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t\t\t

    After submitting the form, the window will automatically close after Success! is displayed.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

    \n\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t
    \n\t\t\t
    \n\t\t\t<\/i>\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t\t\t

    Then you will receive a response after submitting the form<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

    \n\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t

    Report<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t\t\t

    Click\u00a0<\/i>\u00a0icon in webview manager and you can see your webview report grouped by subscriber and clicking the eye icon inside here will pop up the submitted form data in details.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

    \n\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t

    Example Use Cases<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t\t\t
    • A ticket-search bot can display an interactive stadium seat map for choosing a seat.<\/li>
    • A travel bot can provide travel preferences\u2014aisle vs. window, inn vs. hotel, dietary needs\u2014accessible from the persistent menu.<\/li>
    • A dental-appointment bot can display an interactive calendar for choosing an appointment slot.<\/li>
    • A news bot can provide a multi-select list of topics to subscribe to.<\/li>
    • A commerce or brand bot can offer personal preferences to customize offers and free gifts.<\/li><\/ul>

      If you are a developer, you can set a webhook URL after the user submits the form. The system will send the content in the form to the webhhok URL after the user submits the form.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

      \n\t\t\t\t
      \n\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
      \n\t\t\t\t
      \n\t\t\t\t\t\t\t

      For details on how to set the webhook url, please refer to JSON API Connector<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"

      How it works The Messenger Platform allows you to open a standard webview, where you can load webpages inside Messenger. This lets you offer experiences and features that might be difficult to offer with message bubbles, such as picking products to buy, seats to book, or dates to reserve. Webform builder Go to \u00a0and you […]<\/p>","protected":false},"author":1,"featured_media":0,"parent":9731,"menu_order":11,"comment_status":"open","ping_status":"closed","template":"","doc_tag":[],"doc_badge":[100],"class_list":["post-9979","docs","type-docs","status-publish","hentry","doc_badge-pro","no-post-thumbnail"],"acf":[],"_links":{"self":[{"href":"https:\/\/docs.franschat.com\/zh\/wp-json\/wp\/v2\/docs\/9979","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/docs.franschat.com\/zh\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/docs.franschat.com\/zh\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/docs.franschat.com\/zh\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/docs.franschat.com\/zh\/wp-json\/wp\/v2\/comments?post=9979"}],"version-history":[{"count":14,"href":"https:\/\/docs.franschat.com\/zh\/wp-json\/wp\/v2\/docs\/9979\/revisions"}],"predecessor-version":[{"id":10743,"href":"https:\/\/docs.franschat.com\/zh\/wp-json\/wp\/v2\/docs\/9979\/revisions\/10743"}],"up":[{"embeddable":true,"href":"https:\/\/docs.franschat.com\/zh\/wp-json\/wp\/v2\/docs\/9731"}],"wp:attachment":[{"href":"https:\/\/docs.franschat.com\/zh\/wp-json\/wp\/v2\/media?parent=9979"}],"wp:term":[{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/docs.franschat.com\/zh\/wp-json\/wp\/v2\/doc_tag?post=9979"},{"taxonomy":"doc_badge","embeddable":true,"href":"https:\/\/docs.franschat.com\/zh\/wp-json\/wp\/v2\/doc_badge?post=9979"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}