Create a web embed

Distribute a Touchpoint activity by embedding it on a web page.

Prerequisites:

The website is integrated with Touchpoint.

Note:
  • You can distribute one activity per web page.
  • To distribute an activity on different pages of the same website, you must create a new distribution for each page.
  1. On the Dashboard or the Activities page, click the activity name, and then click Distribute.
  2. Click New Distribution.
  3. Click Share on your site.
  4. Click Web Embed.
  5. Name your distribution.
  6. Select the site where you will place the activity.
    The options are based on the sites on the Digital Channels page. You can add or edit sites on the Digital Channels page.
  7. Choose where the activity will appear:
    • On all pages of the site
    • On a page I specify

      If you choose this option, type the URL where the activity will appear.

  8. Optional: Select or clear Allow Respondents to change activity language.

    This option is available for multilingual activities. When this option is selected, participants can choose their preferred language from a menu in the top left corner of the first screen. Their language choices cannot be changed in subsequent screens. The available languages reflect the languages in which the activity was authored.

    Participants' language selections apply on a per distribution, per activity basis; they are not saved and persisted across distribution methods for the same activity, or in future Touchpoint activities.

  9. Optional: Display footer links in the activity.
    1. Select Show footer links.
    2. Select the footer links you want to display.
  10. Click Continue.
  11. Choose who will see the activity.
    • All Visitors

    • Visitors with specific attributes

      If you choose this option, select the attribute name and then set the condition operator and values. Click Add Attribute to add another attribute statement, or click the delete button beside the statement to delete it. The attribute statements have an "and" relationship; visitors must meet all conditions to see the activity.

      The condition operators and values vary depending on the data type of the attribute.

      Attribute data type Condition operators Values
      Boolean
      • Is
      • Is not
      		Select one of these values:
      • true
      • false
      Date
      • Is
      • Is not
      • Is after
      • Is before
      • Is on or after
      • Is on or before

      Click the calendar button to open the date picker and select a date.

      In calendar view, use the left and right arrows to scroll through the calendar a month at a time.

      Alternately, type a date (yyyy-mm-dd).

      Number
      • Is
      • Is not
      • Greater than
      • Greater than or equal to
      • Less than
      • Less than or equal to

      Type a number.

      String
      • Is
      • Is not
      • Contains
      • Does not contain
      • Ends with
      • Starts with

      Type the string values and press Enter after each one. To remove a value, click the x beside it.

      Multiple string values have an "or" relationship. Visitors must have one of the values. For example, in the screenshot above, the visitor must have a country value of "Canada" or "United States."

      The string value must be an exact match for the value that is passed to the website. For example, if you type United States but the value that is passed is USA, the attribute statement will not work.

      For more information, see Targeting with visitor attributes.

  12. Optional: Select Set Response LImit.

    Set Response Limit acts like a time-based quota and allows you to collect a certain number of completed responses within a specific time frame. The activity stops appearing once the number of completes is reached. If the completes occur before the specified time frame elapses, the remainder of the time frame will continue to elapse without the activity showing. After the time frame is reached, the number of completes and the time frame are reset. Collecting the same number of completed responses within the same time frame begins again.

    1. Type the number of visitors from which you want to collect completed responses.
    2. Type the number of time units.
    3. Select a time unit:
      • Day(s)
      • Week(s)
      • Months(s)
  13. Optional: Set a distribution quota.
    1. Select Add a Quota.
    2. Type the quota target.
    3. Set the behavior after the quota is met:

      • Deactivate this distribution

        The distribution is closed after the quota is met. Participants who try to access the activity through this distribution will see an "Activity Not Found" 404 error message. The distribution can take up to 30 seconds to deactivate, during which over-quota completions may occur.

      • Continue collecting responses

        The distribution remains open. Participants who try to access the activity through this distribution can still complete it even though the quota is met.

    For more information about quotas, see Using quotas with Touchpoint activities.
  14. Click Continue to review your distribution details.
  15. Click Distribute.
    Result: The distribution is now open. A code snippet is generated for the web page embed.
    Code snippet example
    <script defer>
      if (window.Touchpoint) {
        const embeddedDistURL = window.Touchpoint.getEmbeddedDistURL();
        if (embeddedDistURL) {
            // Show the embedded distribution in an iframe or web element or wherever you wish
            // e.g document.getElementById("<<web element ID>>").src = embeddedDistURL
        } else {
            // Hide the iframe or web element that was supposed to contain the embedded distribution
            // e.g document.getElementById("<<web element ID>>").style.display = 'none'
        }
      } else {
        window.addEventListener("TouchpointLoaded", function() {
          const embeddedDistURL = window.Touchpoint.getEmbeddedDistURL();
        if (embeddedDistURL) {
            // Show the embedded distribution in an iframe or web element
            // e.g document.getElementById("<<web element ID>>").src = embeddedDistURL
        } else {
            // Hide the iframe or web element that was supposed to contain the embedded distribution
            // e.g document.getElementById("<<web element ID>>").style.display = 'none'
        }
        });
      }
    </script>
  16. Copy and paste the code snippet inside your website's <head> tag and make the appropriate edits.
    • In the code snippet, embeddedDistURL is a variable that represents the embedded Touchpoint activity.
    • Remove // e.g and the // comments and keep the example lines of code.
    • Replace <<web element ID>> in the getElementById function with the ID of the web element that contains the Touchpoint activity.
    • To resize or to style the activity, modify the CSS of the web element ID in which the activity is embedded.