# iFrame

An IFrame (Inline Frame) is an HTML document embedded inside another HTML document on a website. The IFrame HTML element is often used to insert content from another source or monitor a website (or more than one).

### The method to use

The method is `s.plt.iframe()`

It must contain the following input variables:

```python
url: str
order: int
```

And accepts the following input variables as optional:

```python
height: int 
cols_size: Optional[int]
padding: Optional[str]
```

#### Video demonstration of the HTML iFrame

{% embed url="<https://api.media.atlassian.com/file/fa9d59d8-e97a-4e48-864d-18899f8af45b/artifact/video_1280.mp4/binary?client=acb7ab48-9de5-4698-bc3e-5e7ecb6bc0a7&collection=contentId-456851656&max-age=2592000&token=eyJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJhY2I3YWI0OC05ZGU1LTQ2OTgtYmMzZS01ZTdlY2I2YmMwYTciLCJhY2Nlc3MiOnsidXJuOmZpbGVzdG9yZTpjb2xsZWN0aW9uOmNvbnRlbnRJZC00NTY4NTE2NTYiOlsicmVhZCJdfSwiZXhwIjoxNjQ3NDM0MzY0LCJuYmYiOjE2NDc0MzE0MjR9.4fyaoivdxH6sX_xPDIGmj2i7yKwhqbkITk3WSLd8o3k>" %}
The iFrame settings and usage.
{% endembed %}

### Examples

#### 1. Default configuration

&#x20;This one is configured to use the website <https://teamaspar.com>

<pre class="language-python"><code class="lang-python"><strong>s.plt.iframe(url='https://teamaspar.com', order=0)
</strong></code></pre>

The result is:

![The iFrame is in the default configuration. ](https://3782181538-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUlHTfmIZY46Z1EDfyGMz%2Fuploads%2FuEoPo5h9y0ExiEJEZ4yf%2FIFrame.png?alt=media\&token=b4dd9ecf-93ff-4963-9a42-c5c20a428540)

#### 2. Title for the iframe, size and padding

You can set a title for every site to monitor:

```python
s.plt.iframe(
    url='https://teamaspar.com',
    order=0, cols_size=8,
    padding='0,0,0,3'
)
```

The result is:

![Note the space before the component using padding='0,0,0,3', and size with cols\_size=8.](https://3782181538-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUlHTfmIZY46Z1EDfyGMz%2Fuploads%2Fbjh26M3EhSzGZVBFOSDu%2FIFrame%20Configured.png?alt=media\&token=0521b35b-778b-4f74-86ab-e8a86bbaf0b6)

{% hint style="info" %}

### Featured Content

[changing-the-menu-path](https://docs.shimoku.com/dev/building-web-app/menu/changing-the-menu-path "mention")\
The `menu_path` can be modified.<br>

[using-the-grid](https://docs.shimoku.com/dev/building-web-app/grid/using-the-grid "mention")

It is possible to use any number of rows.
{% endhint %}