Protobi

← All help posts

View post

An intro element at the beginning of a project has visual appeal, and informs the user about the study.

1\. To add an intro element, go to the "[More properties...](/edit-access/element-properties)" dialog for the group (e.g. Screener). Reference a new item "Intro" as the first item in the "children" attribute.

The element will initially appear empty:

2\. To add images and text, open the HTML content editor by selecting the element and using the shortcut SHIFT + x + c .

3\. Use HTML tags to add different [](https://www.w3schools.com/html/html_headings.asp)[headings](https://www.w3schools.com/html/html_headings.asp), [](https://www.w3schools.com/html/html_images.asp)[images](https://www.w3schools.com/html/html_images.asp) and [](https://www.w3schools.com/html/html_paragraphs.asp)[paragraphs](https://www.w3schools.com/html/html_paragraphs.asp).

Expand the panel to copy the above code.

## Intro element HTML code

```
<h2>Example Pharma Survey</h2>
<img src="/v3/datasets/5a5fa2dd136a3a0004b461d0/direct/splash-image.jpg">
Summary: This is an example survey of health care professionals about their current treatment patterns and interest in a new product.

The survey demonstrates a wide array of question types and illustrates some complexities common to many surveys.

Sample: 100 physicians

```

[Delete](#)

4\. Open the [JSON editor](http://help.protobi.com/editaccess/edit-json#%0AJSON%20editor-0) and edit or add these attributes:

1.  Set "type" to "empty" (line 16 below).The intro element doesn't contain data, setting type to empty will remove the frequency bar for \[NA\]. 
2.  Set "chartType" to "" (line 3). Or you can delete that attribute altogether. 
3.  Add a "css" attribute (line 5) to format the image. You can do a variety of things, but here we just adjust the width of the image that is referenced in the content attribute. 
    See [CSS Styling images](https://www.w3schools.com/css/css3_images.asp) for more examples.

Note the "content" attribute contains the HTML code you add in the HTML content editor (SHIFT + x + c).

End result:

Expand the panel below to copy the entire JSON for the above element.

## JSON code

```json
{
    "roundby": null,
    "key": "Intro",
    "type": "empty",
    "title": "",
    "displayKey": null,
    "field": "",
    "color": "",
    "maxValue": null,
    "chartOptions": {
        "width": 393,
        "height": 453
    },
    "width": "400",
    "sortby": null,
    "chartType": "BasicElement",
    "content": "<h2><%=dataset.name%></h2><img src=\"https://app.protobi.com/v3/datasets/5a5fa2dd136a3a0004b461d0/direct/splash-image.jpg\">Summary: This is an example survey of health care professionals about their current treatment patterns and interest in a new product. The survey demonstrates a wide array of question types and illustrates some complexities common to many surveys.Sample: 100 physicians",
    "css": {
        "img": {
            "width": "100%"
        }
    }
}
```

Publishing

Date

Status

Slug edit

Content

Thumbnail

Categories Manage

Tools

AI Database

Publishing

Content

Tools

Danger zone