---
title: "Embed an image"
slug: "embed-an-image"
tags: ["Images", "shortcuts", "embedded widget", "Widget"]
status: "update"
updated: 2026-10-09T18:08:49Z
published: 2026-10-09T18:08:49Z
canonical: "support.tulip.co/embed-an-image"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://support.tulip.co/llms.txt
> Use this file to discover all available pages before exploring further.

# Embed an image

There are three ways to add Images to an app:

1. Copy and paste from your computer's clipboard in Chrome
2. Manually upload from your desktop
3. Use an image URL

## Copy and paste an image

You can copy and paste images into apps using CTRL+C and CTRL+V on Windows, and CMD+C and CMD+V on Mac.

## Upload an image

### Image widget

1. Navigate to the Step in the app.
2. Click **Embed** in the Toolbar and select **Image** from the dropdown.

![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/How%20to%20Add%20Images%20To%20An%20App_92248679.png)

1. In the Widget Tab of the Side Pane, configure the **Datasource** to **Static Value**.
2. Paste the Image URL into the field below or click the upload button to select from your local drive.

### Drag image into a step

You can also click and drag images from your local drive and drop them into a step.

![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/How%20to%20Add%20Images%20To%20An%20App_92249780.png)

## Image URL variable

You can [create a variable](/r230/docs/how-to-create-and-use-variables) with type "image" and then store a specific image as a default value. Or, you can update that Variable with a new image in the Trigger Editor.

1. In the Side Pane, click the **App** tab and click ***X*** next to **Variables**.

![Variables1](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Variables1.png)

1. Click **+ Create variable**.
2. Name the variable "testimage" and select **Image URL** as the type.
3. Click the **Upload icon** under **Default Value**.

![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/How%20to%20Add%20Images%20To%20An%20App_119727099.png)

You can update this image via a Trigger. Use "Data Manipulation" --> "Store" to add a new image URL or upload an image to this variable.

## Style and add triggers to an image

You can edit the following properties of images after they are uploaded to Tulip in the Side Pane on the right side of the screen:

- Image sizing
- Rotation
- Drop shadow
- Border
- Blinking

You can also add a trigger to an image or show a fullscreen version of it when clicked. Use the **Click Actions** menu in the side pane after selecting the image.

## Technical Details of Image Support

Tulip supports the following image formats:

|  | Maximum file size |
| --- | --- |
| PNG | 20 MB |
| JPEG | 20 MB |
| GIF | 5 MB |
| SVG | 5 MG |

NOTE

JPEG and PNG will be automatically resized to 1920 x 1200 at maximum.

---

Did you find what you were looking for?

You can also head to [community.tulip.co](https://community.tulip.co/?utm_source=intercom&utm_medium=article-link&utm_campaign=all) to post your question or see if others have solved a similar topic!

**Image**

**Images** are a Tulip Datatype. Images are a reference to a web-hosted location for all Tulip Images.

**Step**

A view your users will see within an application. **Steps** can be viewed chronologically or in whatever order best fits your process.

Steps can be grouped into **Step Groups** to manage and organize your app Steps.

**Widget Toolbar**

The **Widget Toolbar** Is the menu where widgets can be found and added to your application. ![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/toolbar.png)

**Widget Tab**

In the **Side Pane**, the **Widget Tab** is where you can adjust the **Widget****-level** settings, including **Widget** **Triggers,** **Widget** Datasource, **Widget** Contents, and more. ![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Widget%20Tab.png)

**Side Pane** **(Context Pane)**

The **Side Pane** is the configuration pane on the right side of the **App Editor** where steps, apps, and widgets can be configured. **Triggers** can be added to adjust widget behavior.![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Context%20Pane.png)

**Variable**

**Variables** are a location to store app information. Variables have a specific type that must match the contents they can store.

Variables are only accessible within a single application and are cleared when the app is restarted or completed.

**Trigger**

**Triggers** are groups of logic that are tied to an app event, such as step open, timer, widget interaction, etc. App builders can add triggers to **widgets**, **machines**, **devices**, **apps**, and **steps**.

**Triggers** can contain **actions**, **transitions**, and **conditions**.

**Side Pane** **(Context Pane)**

The **Side Pane** is the configuration pane on the right side of the **App Editor** where steps, apps, and widgets can be configured. **Triggers** can be added to adjust widget behavior.![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Context%20Pane.png)