Creating a new capture widget

To enable the capture widgets on your data source’s website, an integration between Ortto and your data source must be configured, which would have been done when you created your Ortto account or configured a new data source, including a tracking code.

To create a new capture widget, you can do so either from scratch or from a template.


Create a capture widget from scratch

Creating a capture widget from scratch gives you a blank canvas to build the capture widget. The color palette, fonts, and styles used in the capture widget are inherited from your brand book when creating a new capture widget from scratch.

To create a new capture widget from scratch in Ortto:

  1. On the Capture page, click New widget.
  2. On the New widget page, click Start from scratch, click Next.
  3. On the Widget types page, select the type of capture widget from the list and click Create:
    Types of capture widgets
  4. On the New widget (capture widget details) page:
Creating a capture widget from scratch (Click on the GIF to maximize it)

Create a capture widget from a template

To create a capture widget from a template in Ortto:

  1. On the Capture widgets page, click New widget.
  2. When you choose a template, you can apply your brand book settings by selecting the Use brand book settings checkbox, then click Use template to get started. If the template you selected uses data from a connected data source, you’ll need to choose the relevant accounts.
    Creating a capture widget from a template (Click on the GIF to maximize it)
  3. On the capture widget details page the capture widget’s content, style and configuration are pre-set according to the template you chose however, you can:

Configure the capture widget

You can edit the content of the capture widget to modify its content components and appearance.

The content editing features are similar for most capture widgets, although there are differences for form and spin the wheel capture widgets.

Once you’ve created the content, navigate to the style and settings tabs for additional configuration.

Content

The content section will be similar for most capture widgets. To edit the content:

  1. After creating a capture widget from scratch or from a template, click Edit on the capture widget details page.
    The capture widget’s content editor page consists of numerous display components, such as Greeting and Thank you components, which contain the messages and controls to engage your visitors.
  2. Edit the Greeting or Thank you display components, each of which is made up of one or more content components:
    • Click on the content component to expand and collapse the content.
    • Click and hold the content component or its re-order icon to drag and drop them.
    • Click the trash can icon to delete the content component.
    • Click Add content to add from the available content components for the capture widget, default options include:
      • Text
      • Button
      • Form
      • Coupon
      • Image
      • Video
      • Reaction
      • Survey
      • Countdown

    NOTE: The content components FormReaction, and Survey add a Thank you display component which provides feedback or coupons to the user after completing the capture widget.

    Adding and editing components (Click on the GIF to maximize it)
  3. Review the changes in the capture widget preview on the right-hand-side of the screen, which:
    • Shows changes made to the content component.
    • Allows you to switch between the preview for the greeting and thank you display components of the capture widget.
  4. Edit the style to change the appearance of the capture widget.

TIP: Click the merge tag icon to add merge tags to text and links.

Example merge tag in a link

Style

Edit the style to adjust the appearance of the capture widget.

On the Edit capture page, click Style and use the various options provided to customize the appearance of the capture widget. A preview of the capture widget is provided on the right as you alter options on the left.

Settings

Configuring the capture widget enables you to specifically target where, when, and how the capture widget appears for your users.

Use the configuration components on the left hand navigation bar target the capture widget.

Platforms and pages

In this section you can select the platforms you want to display the capture widget on, including web (desktop and mobile), and, where available, Android and iOS applications.

NOTE: Currently, only popup type capture widgets can be configured for mobile applications.

Once you’ve chosen the platforms to display the widget, you can specify the pages on which it appears. These options include:

  • Any page,
  • On any page, excluding specific pages, or
  • On specific pages only.

When you select to exclude or specify the pages to display the capture widget, an Add page link appears. Click this link, to specify:

  • the exact URL (is) for the page which displays the capture widget,
  • the exact URL (is not) for the page which should not display the capture widget,
  • pages where the URL starts with a specific URL,
  • pages where the URL ends with a text string,
  • pages which contain (contains) a specific text string, or
  • pages which do not contain (does not contain) a specific text string.

Recipients

In this section, set the rules determining who will see the capture widget.

People is used to target which people see the capture widget, based on the following options:

  • Everyone— All visitors to your web page will be shown the widget.
  • Contacts — These are visitors who are known people, such as those who have signed in to your web application or have an existing user session with it, and optionally meet the filter conditions for the capture widget to be displayed. These people are recognized as existing records in your CDP.
    Click Add condition to define a filter to further refine when the capture widget is displayed to people.
  • Anonymous users — These are visitors who are unknown, such as people who have not yet signed in to the web application or do not have an identifiable user session with it. These people may or may not (yet) exist in your Ortto account’s customer data platform (CDP).

Location is used to present the capture widget to users based on their geographical location, which includes the following options:

  • Anywhere,
  • Anywhere, excluding specific countries,
  • Specific countries only, or
  • Within proximity of city.

Trigger

In this section, set the rules determining when visitors will see the capture widget.

Show the widget is used to choose when the capture widget will be displayed, and includes the following options:

  • When page loads,
  • When an element is clicked — The link or button is embedded on the web or mobile app page specifically to open the capture widget using an ID, or class. This could be located within any element of the web or mobile app page.
    The link ID is specified as #<id>, or the class is specified as .<class> in the configuration box.
  • Based on rules — Set display conditions to determine when the widget will be shown. You can choose to have the widget show when any or all conditions are met.
    At Display conditions, you can set a custom amount of seconds spent on the page (up to 120 seconds), or choose from the available options for percentage scrolled and number of pages visited.

At Widget can show, select the frequency at which the widget is shown to a user.

Stop showing the widget is used to configure one or more options when the widget will no longer be shown to the user. The options are:

  • When they convert
  • When they dismiss it — When the user clicks the X on the widget.
  • After an expiration date — This setting is handy for widgets relating to time-sensitive information, such as promoting an event or sale.
    After the specified time, the widget will be turned off.

Form capture widgets

The embeddable Form is used to build a form capture widget which can be inserted into the HTML for your website.

NOTE: For the embedded form to work with Ortto, the tracking code will need to be added to the <head> tag for the pages with the form.

All ecommerce data source integrations that can be configured through Ortto incorporate the tracking code automatically. For others, you will need to incorporate the tracking code manually.

To create an embeddable form in Ortto:

  1. Edit the content and style as you would for most capture widgets, with the following differences:
    • As the capture widget is an embeddable form, Add content is reduced to only the content components permitted within a form.
    • Click Add field to add an existing field, or create a new field to add to the form. New fields may be stored as a temporary activity attribute, or as a custom field on a person’s record as well as an activity attribute.
    • Form fields can be configured to be pre-filled and/or hidden depending on the data available for a contact. Learn more at How to pre-fill and hide form field data.
    • Adjust the specific form options:
      • Unstyled which provides only the raw HTML with no CSS to facilitate the presentation of the form using the website theme.
      • Notify team via email when there’s a submission, which sends an email notification to the people in the Recipients list.
      • Notify team via Slack when there’s a submission, which sends a Slack notification to your selected channel.
  2. To add the form to your website:
    • Copy and insert the form’s Embed code into the HTML for your website.
    • If your data source is an e-commerce integration that was configured through Ortto’s Data sources page or when you created your Ortto account, the tracking code will be added automatically. For any other integrations, you will need to incorporate the tracking code manually. To do this, copy the Ortto tracking code and instert it into the head section of the pages which contain the form.

If you need someone else to add the Embed code and tracking code to your data source, use the optional Email instructions to email them the details for this process.


Tracked form

The Tracked form is used to build a tracked form capture widget which will capture all the data that a person enters into a form submitted on your website.

This widget is suitable for users who have an existing form on their website, such as a bespoke form or one generated from a 3rd party application.

NOTE:

To create a tracked form in Ortto:

  1. Create a capture widget from scratch and under Widget types, select Tracked form.
  2. Enter a name for your form and the URL of the page where the form is located.
  3. Click Next and Ortto will find the form. You can click X to exit and the tracked form builder will run in the background.

When your tracked form has finished finding your form, you can complete the setup. You will see the Setup when the tracked form widget has finished building, or you can access it from the Capture page by clicking on the relevant tracked form.

  1. Under Setup:
    • Pages — If a form is located on multiple pages of your website you can select to capture submissions from all forms on your site or just those from a particular page.
    • Upon submission — Choose the response you want users to see when they submit your form, either following the existing form behavior (such as a confirmation message), or redirect to a URL you specify (such as a page on your website).
    • Required fields — Enable this feature if you only want to receive form submissions that contain data for specific fields, and specify your required fields.
  2. Click Next when you have completed the setup.
  3. Map the form fields to your Ortto CDP fields so that Ortto can identify the person who submitted the form as a person/contact in your CDP:
  4. Drag the relevant Ortto fields from the right-hand column to map the Form fields in the left-hand column.
  5. Once you have finished mapping fields, click Next to save your changes and see the completed tracked form widget.
  6. You can make further changes to the widget by clicking Edit under any of the configuration fields.

Once your tracked form widget is complete it can begin to capture data when a person completes a form submission. You can view form submission activities under Activities.

NOTE:

  • If you have multiple forms on your page, the widget will identify all of them, and you can select which one you wish to configure the widget for.
  • If you only have one form on the page you can proceed directly to the Pages section.

NOTE:

  • All form fields must be mapped to a field in Ortto (a system, data source or custom field). Form fields that are not mapped will be excluded from the form submission data.
  • Mapped fields must match the unique identifiers set in your account Settings > Customer data > Unique identifiers. For example, if you have the unique identifier for People set to Email and for Organizations set to Name, you will need to map these Ortto fields to your form fields.

Spin the wheel capture widgets

Spin the wheel capture widgets have three display components which are ButtonSpin to win, and Outcome.

To edit the content for spin the wheel capture widgets:

  1. After creating a capture widget from scratch, click Edit on the capture widget details page.
  2. Edit the Label for the floating Button by clicking on the content component.
  3. Edit the content and style for the Spin to win display component as you would for most capture widgets.
  4. Edit the content for the Outcome:
    • Click the Wheel content component to add and edit the prizes for the wheel. Some e-commerce data source integration enable coupons to be available directly from the data source.
    • Click and edit Allow contestants to lose to add a lose option to the spin wheel.
    • Click Win ratio to adjust the relative likelihood of success for the options, click Done, and Save when finished.
Configuring the outcome (Click on the GIF to maximize it)

Conversation widget

The conversation widget is used to initiate conversations with contacts/visitors (outbound), such as to announce new products or features, or alert customers to updates regarding your organization.

Learn more about creating a conversation capture widget.


Push notifications capture widget

To send a web push campaign you must first create a capture widget with a push permission request to obtain a person’s (contact’s) permission to receive web push notifications. Learn more about creating push capture widget.


In-app notification (mobile capture widget)

In-app notifications enable you to display a popup-type capture widget to your app users. To create in-app notifications you need to create a popup widget and configure your app to support this feature using Ortto's in-app notifications software development kit (SDK). Learn more about in-app notifications.