Create and add interactive and dynamic elements to your website using 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 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 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 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
Customize the width, height, and other attributes of the embed code to fit
your needs.
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.
If a shared request uses environment variables, replace them with actual
values before sharing to ensure it works correctly.
Click the icon next to the Save button and select “Share Request.”
Choose the widget type: Link, Button, or Embed.
Click the “Create” button to generate the widget.
Customize your request as needed in the subsequent “Customize Request”
panel.
You can choose different formats like Raw, HTML, or Markdown to embed the
request in your app.
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.