Sign in
x
☰

Show text, images and videos in your project

Updated at 2020-08-13 05:02:14 UTC

You can use HTML in Protobi elements to embed images and videos into a project. This can be useful when creating introduction pages for projects that will be shared with a client. You can also use this capability to insert visuals that the respondent was shown in the survey. 

There are many tutorials and resources on the web to learn HTML, here we've included how to insert text, images and videos.

The Summary section shows a healthcare stock photo with medical icons alongside an embedded explainer video player at 01:11 with a blue progress bar. The video thumbnail displays an illustrated presentation scene with three people at a conference table.

"BasicElement" chart type

The Summary page displays a healthcare-themed stock photo featuring a medical professional's hands with a stethoscope alongside floating blue hexagonal icons representing medical technology (heart, eye, molecular structures, medical devices). Below is explanatory text about the survey.

For the Summary element above, the "chartType" is set to "BasicElement". This chart type shows text based information, or html code, which can embed images and videos. "BasicElement" is not yet selectable from the Chart type dialog, so you will need to set the "chartType" attribute from the JSON editor.

"chartType": "BasicElement",

Add "content" to the element

To add the text and visuals for the element, you'll need to include another attribute "content". This is where you'll include the HTML code for the element.

Image example

The example HTML below inserts an image as well as some text below the image. You can copy the below example, and replace the image address and text. Change the size of the image by adjusting the number of pixels (e.g. 400px).

"content": "<img style=\"width: 400px;\" src=\"https://app.protobi.com/v3/datasets/5a5fa2dd136a3a0004b461d0/direct/splash-image.jpg\"><p>This is an example survey of health care professionals about their current treatment patterns and interest in a new product. </p><p>The survey demonstrates a wide array of question types and illustrates some complexities common to many surveys.</p>",

Full JSON for Summary:

The 'Edit element properties: Summary' dialog displays JSON code where line 13 shows "chartType": "BasicElement" and line 14 contains HTML content with an img tag embedding the healthcare stock photo at 400px width from the Protobi app URL.

Generate an image address

For .jpg and .png images you can use an image address generated by Protobi. This works for .gif files as well. Add the files as documents to project data using the appropriate extension.  

The Project settings interface displays four tabs (Data tables, Processes, Documents, Wiki pages) with the Documents section active. The file 'splash-image.jpg' is circled in the documents list, which also shows buttons for 'New document', 'money', 'completes', and 'stacked'.

Then, upload the image. Right click on the "Preview" to copy the image address.

The document panel titled 'splash-image.jpg' displays metadata including Name: splash-image.jpg, Type: document, Updated: Fri Sep 06, 2019 09:26 am, Filename: healthcare-stock-photo.jpg. A preview shows the healthcare image thumbnail with an upload drop zone below stating 'Drop a CSV or SAV data file here or click to select'.

Video example

The 'Explainer video' section displays an embedded video player showing an animated presentation scene with three people at a conference table and a presenter at a whiteboard with charts. The video player shows 01:11 timestamp with standard playback controls including play button, progress bar, volume, settings, and fullscreen.

For video content you will want to use the "embed code" generated from the website used to upload the video. For example, the Explainer video uses system reference code (src) from Vimeo. You can copy the HTML code below, and replace the video link with the src seen in another video's embed code.  

The HTML for the Explainer video content above is as follows:

"content": "</p><p>Introduction to Protobi</p><div class='video-container'><iframe width='640' height='360' style='display:block; margin:0 auto;' src='https://player.vimeo.com/video/172422788' frameborder='0' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>",

Full JSON for Explainer video:

The 'Edit element properties: Explainer video' dialog displays JSON code with "key": "video", chartOptions showing "showBars": true, "width": 678, "height": 358, and line 9 showing "chartType": "BasicElement". Line 10 contains HTML content with a div class 'video-container' and iframe embedding a Vimeo video (ID 172422788) at 640x360 dimensions.