Uplifting web experience with Hoppscotch Widgets

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

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:

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

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