Table of Content
Still need help?
Request support
Request Support
HELP
 / 
 / 
Content Blocks
 / 

Text, HTML, and Embedding

Help Video

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

Text, HTML, and Embedding

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.

Text, HTML, and Embedding

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.

Text, HTML, and Embedding

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.

Text, HTML, and Embedding

- 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.

Text, HTML, and Embedding

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.

Text, HTML, and Embedding

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

Text, HTML, and Embedding

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

Text, HTML, and Embedding

Live App with examples

Text, HTML, and Embedding

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

Text, HTML, and Embedding

Text, HTML, and Embedding

Text, HTML, and Embedding

Text, HTML, and Embedding

Text, HTML, and Embedding

Text, HTML, and Embedding

Text, HTML, and Embedding

Text, HTML, and Embedding

Text, HTML, and Embedding

Text, HTML, and Embedding


FAQs
Try our free plan
It will answer many more questions within just 15 minutes.