Skip to content

Delivery Options

Jump to bottom
Ryan Wold edited this page Jun 30, 2021 · 18 revisions

Touchpoints can be delivered to users in a few different ways:

  1. On the Touchpoints website
  2. On your Website
    1. Modal
    2. Custom button Modal
    3. Inline

On the Touchpoints website

By default, a Touchpoint form is available via the Touchpoints website. The URL to the form (eg: https://touchpoints.app.cloud.gov/touchpoints/40/submit) is shared with a user, who clicks on the link, arrives at the Touchpoints site, and completes the form.

On your Website

Modal

A Touchpoint can be included on an existing web property by including it via a <script> tag. The "Modal" option renders a standard-styled blue tab in the bottom right corner of an existing web page. When the tab button is clicked, a modal form is displayed that includes the Touchpoint. The Touchpoint can be completed and submitted from within that modal window.

In Touchpoints:

  1. Create a Form, selecting Modal for the Delivery Method
  2. Publish the form
  3. Copy the <script> on the Form page

On your website:

  1. Add the <script> above to your website

The script will load on your website, fetch the specific Touchpoint Forms's javascript from the Touchpoints server and 1) render a tab in the bottom right corner of your webpage and 2) fetch the specific Touchpoint Forms's javascript from the Touchpoints server and render the Touchpoint into the a modal your page.

Clicking the tab makes the modal appear and the user can complete the Touchpoint.

Custom button Modal

This image shows where to select a delivery method for a form and where to set an Element Selector, if desired.

A Touchpoint can be included on an existing web property by including it via a <script> tag. The "Custom button modal" option requires the webmaster to add a custom element to an existing web page that has a specified id tag (eg: <button id="open-my-touchpoint">Open the Touchpoint in a Modal</button>). When the custom button is clicked, a modal form is displayed that includes the Touchpoint. The Touchpoint can be completed and submitted from within that modal window.

In Touchpoints:

  1. Create a Touchpoint, selecting Custom Modal Button for the Delivery Method, and for Element Selector, enter the html id of an element on your webpage, eg: touchpoint-button (see below).
  2. Publish the form
  3. Copy the <script> on the Touchpoints page

On your website:

  1. Create a clickable html element with an id, eg: <button id="touchpoint-goes-here"></button>
  2. Add the Touchpoints <script>

The script will load on your website, fetch the specific Touchpoint form's javascript from the Touchpoints web server and render the form into a hidden modal that becomes visible when clicking on the Custom Button on your page with an id that matches the forms "Element Selector."

Inline

A Touchpoint can be included on an existing web property by including it via a <script> tag. The "Inline" option requires the webmaster to add a custom element to an existing web page that has a specified id tag (eg: <div id="insert-my-touchpoint-form-here">Javascript is required to see the form</div>). When the page is rendered, the form is inserted into the custom element. The Touchpoint can be completed and submitted from where it is rendered on the existing page.

In Touchpoints:

  1. Create a Form, selecting Inline for the Delivery Method, and for Element Selector, enter the html id of an element on your webpage, eg: form-goes-here (see below).
  2. Publish the form
  3. Copy the <script> on the Form page

On your website:

  1. Create an html element with an id, eg: <div id="form-goes-here"></div>
  2. Add the <script> to your website

The script will load on your website, fetch the specific Touchpoint Forms's javascript from the Touchpoints server and render the form into the html element on your page with an id that matches the form's "Element Selector"

⚠️ Touchpoints requires javascript to be enabled in the browser.

If javascript is disabled in the browser, the user experiences the following:

  • For the Touchpoints hosted version, the user sees a message indicating Javascript is required.
  • For the Modal version, the user would not see the modal rendered
  • For the Custom button Modal, the user may click the button and not see any action
  • For the Inline option, the user would not see the form inserted into the element on the page
Clone this wiki locally