Links

Freeform

Freeforms are usual for providing context alongside your models. The freeform is essentially a customizable textbox, where you can:
  • Type and format text
  • Add links
  • Add images
  • Add live links to variables in your model (by typing @ to get a list of variables)

Freeform syntax

@: add variable
*One asterisk*: italic text
**Two asterisks**: bold text
- Bullet point: bullet point
# Heading: big heading
## Heading: medium heading
### Heading: small heading
Shift + Return: new line
<br />: force new line
[Link text](https://example.com): hyperlink
![alt text](https://image-url): image (alt text will show on hover/no-load)

HTML in freeform charts

You can use HTML in freeforms - e.g. to style text or add images.
Not all tags/attributes are supported as Causal sanitises the html before rendering it.

Styling text

Causal allows use of the style attribute for spananddiv elements which should enable css styling for inline and block elements respectively.

Adding images to the freeform

Use the following syntax to add an image to your freeform! See the template model here.

Using iframe to embed objects

An iframe is an "inline" frame, that allows you to embed an HTML page within the freeform - this could be a video, or visuals/analytics from other systems etc. For example, our Tutorial models have a Loom video embedded in the freeform.
You can see more on iframe syntax here - however you can usually get the embed code directly from the tool you're trying to embed something from (e.g. Loom), by hitting Share -> Embed, or reading their documentation. Below is an example of the embed code from Loom.
<div style="position: relative; padding-bottom: 101.98300283286119%;
height: 0;">
<iframe src="https://www.loom.com/embed/1234"
frameborder="0"
webkitallowfullscreen mozallowfullscreen allowfullscreen
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
</iframe></div>