Text, HTML, and Embedding

Help Video

‍

This article explains the Text, HTML, and Embedding block that can be added to design an app.

‍

‍

Use Cases

1. Adding read-only instruction, help text, formatted text, images, videos etc. to an app
2. Embedding any videos or external images
3. Embedding another Clappia app
4. Add long questions or paragraphs

Editing the Block

Click on the block and start editing on the panel that appears on the right side.

Label

This is what appears as the label for the content added in this block.

‍

Plain Text or HTML

This is the editor area where you can write and edit any text, insert an image, link, table, or a page break in the box and it will appear as a read-only text to the end-users.

‍

Main Content - Rich Text, Image, Table & Formatting

- Type any plain text in the box and stylize the text to Rich Text with respect to font size, font colour, background colour, bold, italicize, underlining, alignment, ordered grouping, indentation and many more formatting options along with the source code generator of the text.

- You can also insert images. Click on the Image icon a dialogue box will appear asking you to upload the image. 

- After selecting the image, the parameters of the image are automatically fetched from the original image. The relation between the width and height is locked by default. You can click on the lock icon to remove the relations nd resize your image.

- You can also insert a table and type your text and insert any media in the cells of the table.

‍

- the above text and image has automatically generated the code in HTML format in the backend. You can click on the source code button and the HTML opens up.

‍

‍HTML

If you know the basics of HTML, you can add rich text or anything that HTML supports by writing HTML in the input box.

If you don't know how to write HTML, we recommend using this awesome service https://wordtohtml.net/ that lets you write anything like a word file and converts it into HTML. Copy the converted HTML and paste it here.

You can also embed your URL in this block.

‍

- Click on the source code <> icon and an input box opens up.

‍

- Write your code or embed your URL and click on save.

‍

- You can see the HTML is converted accordingly to plain text in the editor and displayed accordingly in the app.

‍

Live App with examples

Supported HTML Tags and attributes

Popular ones -

• div
• p
• b, i, u
• a - Supported Attributes: class, href, name, target
• button - Supported Attributes: type, class, data-*
• img - Supported Attributes: src, width, height
• iframe - Supported Attributes: src, width, height, frameborder
• h1, h2, h3, h4, h5, h6
  
• table, th, tr, td, tbody, thead, tfoot - Supported attributes: class, style, width
• aside
• header
• footer
• nav
• section
• hr, br
• ul, ol, li
• blockquote
• pre
• small
• span
• strong
  

Others -

• abbr, address, article
• bdi, bdo
• caption, cite, code, col, colgroup
• data, dd, dfn, dl, dt
• em
• figcaption, figure
• hgroup
• kbd
• main, mark
• q
• rb, rp, rt, rtc, ruby
• s, samp, sub, sup
• time
• var
• wbr

‍

Formatting Options

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍