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

# Uplifting web experience with Hoppscotch Widgets

> Embed interactive Hoppscotch widgets in your website as links, buttons, or iframes so visitors can run API requests directly from your pages.

Widgets are interactive components that can be embedded in HTML pages to enhance
user experience. Hoppscotch offers three types of widgets: links, buttons, and
embeds. These widgets allow you to easily integrate dynamic elements into your
website or project.

## Links

Links are the simplest way to share your Hoppscotch requests. You can create and share
them with others in three formats: raw, HTML, and Markdown.

Use this link to easily share your request with others or include it in
documentation and blogs.

**Example:** [Run in Hoppscotch](https://hopp.sh/r/r0338F6yoJrJ)

## Buttons

Buttons take things up a notch. These can be embedded directly into HTML or
Markdown files, and you can customize them to match your site's look and feel.

Add this button in your project's documentation, website or blogs to provide easy access to
your requests with a simple click.

**Example:**
[![Run in Hoppscotch](https://hopp.sh/badge.svg)](https://hopp.sh/r/r0338F6yoJrJ)

## Embeds

Embeds are the most advanced widgets, allowing you to integrate a mini version
of Hoppscotch right into your HTML page. This lets your audience interact
directly with your API requests. You can also customize how the embed looks and
functions to match your preferences.

**Example:** [See Embed in Action](https://hoppscotch-embed-widget.netlify.app/)

<Tip>
  Customize the width, height, and other attributes of the embed code to fit
  your needs.
</Tip>

## Shared Request

The **Shared Request** feature allows you to create widgets like links, buttons,
and embeds that can be shared with others. When you share a request, it doesn't
give direct access to your actual request; instead, it generates a shareable
link that others can use.

<Warning>
  If a shared request uses environment variables, replace them with actual
  values before sharing to ensure it works correctly.
</Warning>

### How to Access Shared Request

Steps to Create a Shared Request:

1. Click the icon next to the **Save** button and select **"Share Request."**
2. Choose the widget type: **Link**, **Button**, or **Embed**.
3. Click the **"Create"** button to generate the widget.
4. Customize your request as needed in the subsequent **"Customize Request"**
   panel.
5. You can choose different formats like **Raw, HTML, or Markdown** to embed the
   request in your app.

<Tip>
  After selecting the **"Shared Request"** option and clicking the **"Create"**
  button, at the right-hand sidebar, the current request is saved for easy
  access in the **"Shared Requests"** panel.
</Tip>

### How to Manage Shared Request

To view your shared requests:

1. Click on the **"Shared Requests"** icon in the right-hand sidebar.
2. You will see a list of all your shared requests.
3. Click on any request to access it.
4. Right-click or use the three-dot menu on a request to **customize the widget,
   copy the link, edit, or delete** the shared request.