Skip to main content

Adding and Configuring Page Elements

  • Updated

Pages in an experience are made up of various visual elements that you can add and customize to enhance the experience. 

The following types of elements are available in the Experience Builder:

Except for 3D objects, you can access the elements from the Add element sidebar of the page. Depending on the page you are working on, some elements may not be available for that page.

The following table summarizes the elements available for the various pages in the Experience Builder.

Page Elements Available
Launch Page Text block, video, image (only 1), standard button (only 1)
Blank Page Text block, image, video, standard button, card button
Content Page Text block, image, video, standard button, card button
Card Menu Page Text block, image, video, standard button, card button
i3D Page Text block, image (only 1), standard button (maximum 2), 3D object (only 1)

 

Text Block

Text blocks allow you to enter textual information on the page. You can add as many text blocks as required. In a text block, you can edit the text, format the text, resize the text, add bulleted or numbered lists, add inline images, and add hyperlinks.

Adding and Configuring a Text Block

  1. Click anywhere on the page in which you want to add a text block.

    The Add element sidebar with various element icons appears on the right of the page.

  2. Click the Text block icon (exp_textblock_icon.png) on the sidebar.

    A new text block with the default text “Welcome to Instruct” appears on the page. 

    textblock.png

  3. Click the text block you added to the page.

    The Element Settings panel on the right shows the options to edit, format, resize, and align the text, add bulleted or numbered lists, and add URLs in the text block.

    textblock2.png

Image

You can add images to the pages to provide graphical information. You can upload .jpg, .png, .svg, and .gif image formats.

Adding an Image

  1. Click anywhere on the page in which you want to add an image.

    The Add element sidebar with various element icons appears on the right of the page.

  2. Click the Image icon (exp_image_icon.png) on the sidebar.

    A blank image appears on the page.  

    adding-image-01.png

  3. Click the blank image on the page.

    The Element Settings panel shows the options to insert an image.

  4. Select one of the following two options to insert an image:

    • URL: Enter the URL to the image.
    • Upload: Click the upload files link to select the image by navigating to the image location on your device or to drag-and-drop the image onto the blank image on the page.

AI Generate

If your CareAR plan gives you access to AI features, you can use generative AI to create original images for the Image element in your experience. To use the image generation feature, follow these steps:

  1. Select the image element you want to generate an image for.
  2. In the properties window, click on the AI Generate link found just below the image upload.
  3. Enter a prompt that describes the image you want generative AI to create for you. NOTE: View the prompt guide by clicking on “How to write a prompt” for instructions on constructing an ideal prompt.
  4. Click on the GENERATE button.
  5. After a moment, you will be presented with up to 4 images to choose from. Select the best image and it will be used for the image element. Alternatively, you can adjust your prompt and submit again.

adding-image-02.png

  • Display full Width:If on image will occupy 100% of available screen width.
  • Note: The Upload option is the default selection. After the image is successfully uploaded, the image file name appears below the option.

adding-image-03.png

Cropping an Image

You can crop an image using the Crop icon (exp_crop_icon.png) to remove any unwanted or excess areas of the image. 

  1. Click the image in the page. 

    Icons appear just above the image.

    exp_image_crop.png

  2. Click the Crop icon (exp_crop_icon.png).

    Crop handles appear around the image along with a green check mark and a red cross.

    exp_image_crop_handles.png
  3. Move the crop handles as desired and then click the green check mark to finish cropping.

Video

You can insert existing videos and recordings in your page. Experience Builder supports videos in .mp4, .m3u8, and YouTube URL formats. Additionally, you can also add subtitles to the videos added to an experience through .vtt files.

Adding a Video

  1. Click anywhere on the page in which you want to add a video.

    The Add element sidebar with various element icons appears on the right of the page.

  2. Click the Video icon (exp_video_icon.png) on the sidebar.

    A blank video placeholder appears on the page.

  3. Click the blank video placeholder you added to the page.

    The Element Settings panel shows the options to add a video.

  4. Select one of the following two options to insert a video:

    • URL: Enter the URL to the video. This option supports external videos in the .mp4, .m3u8, and YouTube URL formats. 

      video-url.png

    • Upload: Click the upload files link to select the video by navigating to its location on your device or drag-and-drop the video onto the blank placeholder on the page. 

      Note: The Upload option is the default selection. With this option, you can insert only .mp4 video files. After the video is successfully uploaded, the video file name appears below the option.

      The progress of the video upload is displayed in the Element Settings panel and the video placeholder on the page. After the video upload is complete, the video file name appears below the Upload option.

Adding Subtitles to Videos

You can add subtitles in different languages to the videos in an experience through .vtt files. 

  1. Select a video that is added to a page.

    The Element Settings panel shows the options for the video.

  2. Click the + ADD button under Subtitles.

    The Add subtitle dialog box opens.

    exp_add_subtitle_dialog.png

  3. Enter the Subtitle label that you want to be displayed in the subtitle menu on the video. 
  4. Browse and select or drag-and-drop the subtitle file (.vtt) on to the dialog box. 

    exp_add_subtitle_dialog_set.png

    The ADD button is enabled.

  5. Click the ADD button.

    The subtitle file starts uploading, which when completed appears under Subtitles in the Element Settings panel.

    exp_video_subtitle_added.png

  6. Click the PREVIEW button (exp_preview_icon.png).
  7. In the preview, click the three dots on the video and select Captions, which by default is Off.

    The captions are now turned on and set to the subtitles that you added in the previous steps.

    exp_preview_subtitles.png    exp_preview_subtitles_set.png

    When you play the video, the subtitles now appear.

    exp_preview_subtitles_french.png

You can add multiple subtitle files (.vtt) for different languages to the same video. In such cases, the Captions list shows all the languages in the preview.

exp_preview_subtitles_multiple.png

iFrame

An iFrame (short for Inline Frame) is an HTML element that allows you to embed external HTML elements within it. You can use this page element to embed specific content (your company's website, data you want to present on real time values, web pages that are updated frequently outside of the experience, tags, forms, or other interactive elements) within your CareAR Instruct Experience.

 

Note: The child website must support iFrame embedding for the URL you are utilizing. Adding and Configuring an iFrame.

1. Click anywhere on the experience page in which you want to add an iFrame.

 

The Add element sidebar with various element icons appears on the right of the page

2. Click the iFrame icon () on the side bar.

3. Click the iFrame you added to the page.

The Element Settings panel on the right shows the option to add an iFrame URL. 

Note: All iFrame URLs must start with https://.

4. You can resize the iFrame element by selecting the crop option () on the top right corner of the page, adjusting the size with resultant curser.  Select () to finalize the crop.

5. Publish the experience for the iFrame element to go live.

AR

An AR element allows you to embed 3D objects into a page that are viewable in augmented reality. You can use this page element to display the object anchored on a surface allowing users to view the 3D object in real space through the mobile device camera.

 

Adding and Configuring an AR Element

 

  1. Click anywhere on the page in which you want to add an AR element.  The Add element sidebar with various element icons appears on the right of the page.
  2. Click on the AR element icon from the side bar. This will place the element on the page.
  3. Click on the AR element that you just added to the page. The element settings panel on the right shows the options to configure the AR element. The settings allow you to upload 3D files for Android (.glb) and iOS (.usdz), and a preview image.
    1. For Android you can simply drag and drop or browse to upload the .glb file from your device.
    2. For iOS you can simply drag and drop or browse to upload the .usdz file from your device.
    3. You can upload your own preview image to replace the default if you desire. Click Change preview image and simply drag and drop or browse to upload the image file from your device.
    4. NOTE: It is recommended to provide both .glb and .usdz files so users on Android and iOS can view the 3D objected in AR.
  4. You can resize the AR element by selecting the crop option () on the top right corner of the page, adjusting the size with resultant curser.  Select () to finalize the crop.
  5. Publish the experience for the AR element to go live.

Form

A Form element allows you to embed forms into a page that can collect information from the user. You can have form submissions emailed to a configured email address or sent via webhook to a configured HTTPS endpoint.

Picture1.png

  1. Click anywhere on the page in which you want to add a Form element.  The Add element sidebar with various element icons appears on the right of the page.
  2. Click on the Form element icon from the side bar. This will place the element on the page.
  3. Click on the Form element that you just added to the page. The element settings panel on the right shows the options to configure the Form element.
  4. Enter a name into the Form name field
  5. Configure the Save to session history option. Enabled will save the form submissions to the Session History details. Disabled will not store the form submission in Session History, instead the submission will be sent via email or webhook.
  6. Configure the Send data to setting as desired.
    Setting Parameter Description
    None - When None is configured the submission can only be Saved to session history.
    Email Destination email address “user@domain.com” When Email is configured, every time a form submission occurs it is sent to the configured email address.
    Webhook (JSON) Web service endpoint address “host.domain.com/path/” When Webhook (JSON) is configured, every time a form submission occurs it is sent via webhook in JSON format to the configured web service endpoint address. Note: See Webhooks Payload for more details.
  7. Configure the After submit action that is performed when the user submits the form.
  8. Configure one or more fields on the form. Each field type presents different input types for the end user.
    1. Enter the name of the field in the Field name field. (Example: First Name)
    2. Enable the Required field option to require the user to enter a response to this field. NOTE: If any field is configured as a required field, the user will be prohibited from submitting the form until the field has an input from the user.
    3. Populate the Description field if desired. The description can be used to clarify the desired input or provide instructions to the user filling out the form.
    4. Select the desired Field type. The Drop Down, Radio Button, and Check Box field types also require you to enter the list of options you want to present to the user.
      Field Type Details Selection Configuration
      Single Line Used for collecting minimal text input None
      Multi Line Used for collecting more extensive text input None
      Drop Down Used for selecting a single option from a long list of options Yes
      Radio Button Used for selecting a single option from a short list of options Yes
      Check Box Used for selecting multiple options from a list of options Yes
      Rating Used for collecting user sentiment in a 1 to 5 scale None
      Thumbs Up / Down Used for collecting general user sentiment in a simple thumbs up or thumbs down

      Note: Data returned will be represented by a binary "1" for Thumbs up, and a binary "0" for Thumbs Down.  This allows for a simple SUM operation to determine the total number of questions answersed "Thumbs up" when analyzing data.       		None
  9. Repeat step 8 until all desired fields are present in the form.
  10. Publish the experience for the Form element to go live.

Buttons

Buttons allow you to define navigation between different pages of an experience. You can also use buttons to direct to external web pages or additional resources that are outside the experience. Every button has a connector in the shape of a circle that you can use to define the navigation from that button. 

There are two types of buttons available in the Experience Builder:

Standard Button

A standard button is a button that has text.

Adding and Configuring a Standard Button

  1. Click anywhere on the page in which you want to add a button.

    The Add element sidebar with various element icons appears on the right of the page.

  2. Click the Button icon (exp_stdbutton_icon.png) on the sidebar.

    A standard button appears on the page.

  3. Click the button you added to the page.

    The Element Settings panel shows the options for the standard button.

  4. Select Primary or Secondary from the Button style drop-down list.

    Note: A new standard button is added to a page is of Primary style by default.

  5. Edit the Button label field to enter the text you want to show on the button.

  6. Select the On click action you want the button to perform. 

    • Navigate to page (default selection): Allows the button to point to a specific page using the connector.

      Note: Drag and drop the button connector to the intended page. An arrow line appears between the button and the page to indicate the navigation. To remove the defined navigation, click the arrow line and press Backspace. 

    • Navigate to URL: Allows the button to point to a specific web page.

    • Navigate to previous page: Allows the button to point to the previous page.

    • Navigate to search: Allows the button to point to specific search index and query results. This option is disabled if the Search option in the Launch page settings panel is Inactive.

    • Camera Capture: Allows a user to take up to 10 images. The user can review, delete, or retake images as needed. Once the user is satisfied, they can submit the images. Images can be stored to the CareAR session activity report. Additionally, the images can be emailed to a configured email address or sent via webhook to a third-party system. If webhook is selected, users can optionally select JSON or form-data formats for data to be send to endpoint address. Note: See Webhooks Payload for more details.
    • Start Detection: (Requires AI Services) Adds a Detection block used to determine the behavior of the experience depending on what the system detects during visual verification. See Getting Started with Visual Verification for more details.
        1. Select ML Model – Select a previously trained ML to use during the visual verification process.
        2. Detection Logic – Users configure where the flow of the experience based on what state the system detects by configuring the following two elements.
          1. If System Detects – Select an available label trained into your ML model. 
          2. Then – Select what action to perform following a detection. Users can select the following:
            1. Navigate to Page – Navigate to another page within the experience.
            2. Navigate to URL – Navigate to a configured URL
            3. Navigate to Previous Page – Navigates to previous page in the experience.
            4. Navigate to Search – If search is enabled and configured for your experience, you configure the option to launch to specific search query for your configured search index.

    • Load advanced content: Allows the button to load advanced content (.zip format).



  7. Click the Save button. 

    Note: The Save button is enabled only when you select an On click action different from the current or default selection (Navigate to page).

  8. To add another standard button to the page, you can click ADD BUTTON located at the bottom of the Element Settings panel. 

    Another standard button is added and is horizontally aligned with the existing button.

  9. Change the alignment of the two buttons using the Place buttons drop-down list.

    exp_stdbutton_vertical.png

    Note: The Place buttons drop-down list is visible only when you use the ADD BUTTON to add a new button to the page. 

Card Button

Card buttons behave in the same manner as standard buttons with the additional provision to add an image. You can use card buttons to design menu-like page allowing multiple selections.

Adding and Configuring a Card Button

  1. Click anywhere on the page in which you want to add a card button.

    The Add element sidebar with various element icons appears on the right of the page.

  2. Click the Card button icon (exp_cardbutton_icon.png) on the sidebar.

    A card button appears on the page.

  3. Click the card button you added to the page.

    The Element Settings panel shows the options for the standard button.

  4. Select the Card type, which can be either With image or Without image.

    Note: The default selection is With image. The URL and Upload options allow you to select an image for the card button. These two options are hidden if you select the Without image option.

  5. Add an image to the card button using the URL of the image or upload it by dragging and dropping the image onto the button.

    Note: The Upload option is the default selection. After the image is uploaded, the image file name appears below the option. You cannot crop the image in a card button.

    exp_cardbutton_settings.png

  6. Enter the Title and the Description to enter the text you want to show on the button.

  7. Select the On click action you want the button to perform. 

    • Navigate to page (default selection): Allows the button to point to a specific page using the connector. 

      Note: Drag and drop the button connector to the intended page. An arrow line appears between the button and the page to indicate the navigation. To remove the defined navigation, click the arrow line and press Backspace. 

    • Navigate to URL: Allows the button to point to a specific web page.

    • Navigate to previous page: Allows the button to point to the previous page.

    • Navigate to search: Allows the button to point to specific search index and query results. This option is disabled if the Search option in the Launch page settings panel is Inactive.

    • Camera Capture: Allows a user to take up to 10 images. The user can review, delete, or retake images as needed. Once the user is satisfied, they can submit the images. Images can be stored to the CareAR session activity report. Additionally, the images can be emailed to a configured email address or sent via webhook to a third-party system.  If webhook is selected, users can optionally select JSON or form-data formats for data to be send to endpoint address. Note: See Webhooks Payload for more details.
    • Start Detection: (Requires AI Services) Adds a Detection block used to determine the behavior of the experience depending on what the system detects during visual verification. See Getting Started with Visual Verification for more details. 
      1. Select ML Model – Select a previously trained ML to use during the visual verification process.
      2. Detection Logic – Users configure where the flow of the experience based on what state the system detects by configuring the following two elements.
        1. If System Detects – Select an available label trained into your ML model. 
        2. Then – Select what action to perform following a detection. Users can select the following:
          1. Navigate to Page – Navigate to another page within the experience.
          2. Navigate to URL – Navigate to a configured URL
          3. Navigate to Previous Page – Navigates to previous page in the experience.
          4. Navigate to Search – If search is enabled and configured for your experience, you configure the option to launch to specific search query for your configured search index.
      •  

    • Load advanced content: Allows the button to load advanced content (.zip format).

  8. Click the Save button. 

    Note: The Save button is enabled only when you select an On click action different from the current or default selection (Navigate to page). 

Search Element

 A search element can be placed on a page allowing users to input their search query directly from the page they are working with. Once they input their query the user is taken to the search results.  To configure the search element, ensure that search is Active, and select the search index you would like to use.  See Using Intelligent Search – CareAR for more details.

3D Object

3D (three-dimensional) objects are useful in depicting objects or models in 360 degrees. You can add 3D objects only to an i3D page using the page settings panel located on the right.

Adding a 3D Object

    1. Add an i3D page to the canvas.
      exp_i3d_page_settings.png
      On the right panel, the 3D object option is selected by default. Experience Builder supports 3D objects in the .glb and .gltf formats. 
  1. Select the URL or Upload option to insert the 3D object. 
    Note: The Upload option is the default selection.
  2. Click on the Upload radio button on the right side to insert the 3D model.
  3. You can simply drag and drop or browse to upload the 3D model from your device.

NOTE: Ensure your GLB file is free of error prior to uploading to ensure it will render and behave correctly.

Adding an Image to an i3D Page

On an i3D page, you can add an image instead of a 3D object. The image can be in the .jpg, .png, .svg, or .gif format.

Refer to Adding an Image for information on how to add an image to a page. 

 

Note: The image on an i3D page cannot be cropped. 

Setting the Default View of a 3D Object

After you add the 3D object to the i3D page, you can set its default position using the Set default view link (exp_set_defaultview.png). This link is available for both the URL and the Upload option under 3D object.

  1. Click the Set default view link (exp_set_defaultview.png).
    A dialog box showing the 3D object opens.
    exp_3d_defaultview.png
  2. Rotate or zoom in/out as required to change the orientation or zoom level in the dialog box.
  3. Click the SAVE AS DEFAULT VIEW button located at the bottom of the dialog box.
    The view of the 3D object on the i3D page now shows the default view. Under the 3D object option, the text "Default view set” and the Change link display. You can use the Change link to change the default view of the 3D object.

Note: You can also set the default view of the CareAR logo that appears by default on the i3D page.

Note: After setting the default view of the CareAR logo or a 3D object that has been added using the Upload option, if you switch to the URL option, the default view is lost, and vice versa.

Adding Hotspots and Rich Cards

You can add hotspots and rich cards to a 3D object or 2D image in an i3D page. Hotspots are interaction points that you place on the 3D object/2D image surface to provide information or instruction about that particular portion of the 3D object/2D image such as when you want to label parts of a printer or instruct users to check the state of a part.

To add a hotspot, click the area on the 3D object/2D image where you want to see the hotspot. You can rotate and zoom in or out to navigate the surface area of the 3D object/2D image. Hotspots display as Green circular points on the surface. All the hotspots that you add on the 3D object/2D image are listed under the Hotspots pane on the right panel.

exp_3d_hotspot.png

Note: When you select a hotspot either on the page or in the Hotspots pane, its color changes from Green to Purple.

The pencil icon (exp_pencil_icon.png) next to the hotspot in the Hotspots pane allows you to edit the Hotspot label and add a Description to the hotspot. The label and description appear as pop-up displays called rich cards. 

Rich cards provide additional information typically regarding the object the hotspot was placed on. Rich cards can contain text, images, and link buttons. The Image and the Link button are available from the Add element sidebar of the i3D page. 

exp_3d_hotspot_settings.png

  • Image: Add an image either using an URL to the image or by dragging and dropping an image on your local device. Images can be in the .jpg, .png, .svg, or .gif format.
    exp_3d_hotspot_image.png
  • Link button: Add a link button, edit its Label and set the On click action to navigate to a specific page, previous page, or a web page, load advanced content, or launch search.
    exp_3d_hotspot_linkbutton.png

Note: If you add hotspots to a 3D object, and then switch to the Image option, then those hotspots are removed from the 3D object. A prompt appears to confirm the switch in the content type.

 

Related articles

Powered by Zendesk