HeyBoss offers an intuitive way to integrate third-party tools and enhance your website with premium plugins. Here’s how to install plugins from your HeyBoss project.
Access the Plugin Section
First, go to your HeyBoss project and locate the "Apps " section in the left-hand navigation bar. Then choose plugins you want.Choose the Plugin
In the "Apps" section, you’ll find a list of available plugins. Once you find the plugin you want to install, click on it to open its details.
Add Embed URL
For plugins like YouTube, Vimeo, or social media integrations, you’ll need to input the relevant URL. For instance, if you want to embed a YouTube video, simply copy and paste the video URL into the field provided (e.g., YouTube URL).
Click Add Embed
After entering the URL, click the “Add Embed” button. This will integrate the plugin into your project, and you’ll see the plugin's content displayed on your website according to its settings.
1.Media and Social Platform
YouTube
Feature Description:
Embed YouTube videos, playlists, or channels. You can showcase video content from YouTube, with support for custom video player settings and interactive features.
How to Use:
Input the YouTube video or channel link. Configure video playback settings such as autoplay, mute, and loop.
HeyBoss Parameter Settings:
YouTube URL: Open any YouTube video, copy its URL, and paste it into the URL input box.
Autoplay: Enable or disable autoplay for the YouTube video. By default, autoplay is off.
Mute: Enable or disable mute for the YouTube video. By default, the video will play with sound.
Loop: Enable or disable loop playback for the YouTube video. By default, the video does not loop.
Help Link: YouTube Embed API Documentation
Preview：
YouTube Subscribe Button
Function Description:
The YouTube Subscribe Button API allows you to embed a YouTube subscription button into your project, enabling users to subscribe to a YouTube channel directly from your website.
How to Use:
Channel Name or ID: Open any YouTube channel, copy the channel's ID, and paste it into the input field.
Configure Button Settings: Set the button's size, color, and display position according to your preferences.
HeyBoss Parameter Settings:
Layout: Controls the visual format of the subscribe button, determining how much information is displayed.
Default: A simple layout displaying only a play button icon and the word "Subscribe" in the user's language.
Full: A more detailed layout displaying the channel's avatar and channel title in addition to the standard subscribe button.
Theme: Specifies the color scheme of the subscribe button to help it blend with your website's background.
Dark: Uses a dark background, suitable for dark-themed websites or to create contrast on light backgrounds.
Default: Typically a light theme with a white or light background, suitable for light-themed websites.
Subscribe Count: Determines whether the button displays the number of subscribers the channel has.
Preview：
TikTok
Feature Description:
Embed TikTok videos. With this API, users can directly embed TikTok content into their projects to showcase short video content.
How to Use:
Enter the URL of the TikTok video.
Help Link: TikTok Embed API Documentation
Preview：
Vimeo
Function Description:
Embed Vimeo videos. This API allows users to embed videos from Vimeo into their projects, supporting various video settings.
How to Use:
Enter the Vimeo video link.
Configure the display style, supporting customization of the player appearance.
Help Link: Vimeo Embed API Documentation
Preview：
Bilibili
Function Description:
With the Bilibili API, users can embed videos or playlists from Bilibili into their projects.
How to Use:
Enter the Bilibili video link.
Configure playback settings, supporting customization of appearance and size.
HeyBoss Parameter Settings:
Bilibili URL: Open any Bilibili video, copy its URL, and paste it into the URL input box.
Width: Set the display width of the video.
Height: Set the display height of the video.
Danmu: Whether to enable bullet comments (danmu) on the video. By default, it is turned off.
Help Link: Bilibili Embed API Documentation
Preview：
Function Description:
The Instagram API allows you to embed Instagram posts into your project. It is ideal for displaying social media content such as images and videos.
How to Use:
Open any Instagram post, copy the "Copy Link" of the post, and paste it into the URL input box.
Help Link: Instagram Embed API Documentation
Preview：
Function Description:
Through the Facebook API, you can embed Facebook posts, videos, or pages into your project. It is suitable for social interactions and displaying dynamic content.
How to Use:
Open anyFacebook post, copy the "Copy Link" of the post, and paste it into the URL input box.
Help Link: Facebook Embed API Documentation
Preview：
X Post (Twitter)
Feature Description:
Embed Twitter (X) posts into your project, showcasing text, images, videos, and other content.
How to Use:
Enter the Twitter (X) post URL.
Configure display styles, such as the width and color of the tweet.
HeyBoss Parameter Settings:
Theme: Set the theme background for the embedded tweet. The default is "Dark."
Dark: Uses a dark background, suitable for embedding tweets on dark-themed websites. Text and elements are usually displayed in lighter colors for visual harmony.
Light: Uses a light background, suitable for embedding tweets on light-themed websites. Text and elements are usually displayed in darker colors for readability.
Help Link: X Embed API Documentation
Preview：
Feature Description:
The LinkedIn API allows you to embed articles, company pages, or profiles from LinkedIn into your project.
How to Use: Enter the LinkedIn page link.
Help Link:LinkedIn Embed API Documentation
Preview：
2.Tools and Productivity
Google Maps
Function Description:
Embed Google Maps to display specific locations or location markers. This is suitable for showcasing geographic locations, maps, or location services.
How to Use:
Enter the location or address.
Configure map style, zoom level, and markers, etc.
HeyBoss Parameter Settings:
Address: Used to locate a specific place on the map.
Zoom: Used to adjust the map's zoom level, helping users view geographic information at different levels.
Help Link: Google Maps Embed API Documentation
Preview：
Google Forms
Function Description:
Embed Google Forms into your project. With this API, you can collect user information, conduct surveys, gather feedback, and more.
How to Use: Enter the shared link of the Google Form.
Note: Google Forms must be published first.
Help Link: Google Forms Embed API Documentation
Preview：
Google Calendar
Function Description:
Embed Google Calendar to display schedules, meetings, events, etc., allowing users to view and manage their calendar easily.
How to Use: Enter the shared link of the Google Calendar.
Help Link: Google Calendar Embed API Documentation
Preview：
Google Docs
Function Description:
Embed Google Docs documents to allow users to share and collaborate on document editing.
How to Use：Enter the shared link of the Google Docs document.
Help Link: Google Docs Embed API Documentation
Preview：
Google Drive
Function Description:
Embed files, documents, images, and more directly into your project using the Google Drive API, supporting file viewing and downloading.
How to Use:
Enter the Google Drive file link.
Configure file access permissions and display styles.
Help Link:Google Drive Embed API Documentation
Preview：
Calendly
Function Description:
Embed the scheduling tool into your project using the Calendly API, allowing users to easily book meetings.
How to Use:
Enter the Calendly calendar link.
Configure display styles and features such as time intervals, availability, etc.
Help Link: Calendly Embed API Documentation
Preview：
Eventbrite
Function Description:
The Eventbrite API allows users to embed detailed information about Eventbrite events into projects. It is suitable for organizing and promoting events, performances, conferences, and more.
How to Use:
Enter the Eventbrite event URL or ID.
Customize the event display style, including date, location, ticket options, and more.
Help Link:Eventbrite Embed API Documentation
Preview ：
3.E-commerce and Payment
Stripe Buy Button
Function Description:
The Stripe Buy Button allows users to embed a payment button in your project, supporting product purchases, donations, and other payment operations.
How to Use:
Enter the settings for the Stripe Buy Button.
Customize the style and functionality of the payment button.
Help Link: Stripe Buy Button API Documentation
Preview：
Paypal Donate Button
Function Description:
The PayPal Donate Button allows users to make direct donations in your project. This feature is suitable for charities, foundations, or any organization looking to receive donations.
How to Use:
Enter the PayPal donation link.
Configure the button's style and functionality.
Preview:
Airbnb
Function Description:
The Airbnb API allows you to embed listings and activities into your project, making it easier for users to book accommodations and experiences.
How to Use:
Enter the URL of the Airbnb listing or activity.
Customize the display style, including price, location, and other relevant information.
Help Link:Airbnb Embed API Documentation
Preview ：
4.Interactive and Marketing
Mailchimp
Function Description:
The Mailchimp API allows users to embed email subscription forms into their projects, making it easy to collect users' email addresses for marketing campaigns.
How to Use:
Enter the Mailchimp form embed code.
Configure the form fields and display style.
Help Link: Mailchimp Embed API Documentation
Preview:
Hubspot
Function Description:
The Hubspot API allows you to embed forms, chat boxes, and other interactive elements into your project, making it easier to collect leads and engage in real-time communication.
How to Use:
Enter the Hubspot form or chat window embed code.
Configure the form fields and interaction settings.
Help Link:Hubspot Embed API Documentation
Preview:
Twitch
Function Description:
The Twitch API allows you to embed Twitch live streams or videos into your project, ideal for showcasing game streams, online events, and other content.
How to Use:
Enter the Twitch channel URL or video ID.
Configure the size of the stream window, borders, and interaction settings.
Help Link:Twitch Embed API Documentation
Preview:
Product Hunt
Function Description:
The Product Hunt API allows you to embed introductions to new products, including the latest product launches and community feedback.
How to Use:
Enter the Product Hunt product link.
Customize the product display style and details.
HeyBoss Parameter Settings:
Type: Specifies the category or feature related to the product.
reviews: Feedback and ratings from Product Hunt community users.
drive_support: Customer support or technical assistance provided by the product team.
social_recognition: Features or strategies that gained attention and recognition through social media.
Theme: Defines the product's interface or brand's visual design style.
light: Uses a light background with dark text, offering a bright and fresh feel, typically associated with simplicity and modernity.
dark: Uses a dark background with light text, giving a calm, dramatic vibe, which can convey a high-end or avant-garde atmosphere.
neutral: A balanced, understated design style, often using soft colors, suitable for a wide range of settings and users.
Help Link:Product Hunt Embed API Documentation
Preview ：
5.Survey and Form
Typeform
Function Description:
The Typeform API allows you to embed Typeform forms into your project, perfect for creating interactive surveys, questionnaires, feedback forms, and more.
How to Use:
Enter the Typeform form link.
Customize the form’s appearance and question settings.
Help Link: Typeform Embed API Documentation
Preview:
JotForm
Function Description:
The JotForm API allows users to embed JotForm forms into projects, perfect for creating online surveys, registration forms, collecting information, and more.
How to Use:
Enter the JotForm form embed code.
Customize the form’s appearance and fields.
HeyBoss Parameter Settings:
Display Form: You can present the form in three different display modes:
Standard: The form will be embedded directly into the webpage and displayed alongside other content. Users can see and fill out the form directly when visiting the page.
Popup: The form will appear as a popup when a user clicks a button or link. The popup will overlay the current webpage, and users must interact with the popup (fill out the form or close it) before continuing to browse the page.
Popover: The form will appear as a smaller popup when the user hovers over or clicks a specific element. The popover typically doesn't cover the entire webpage but floats as a small window on the page.
Help Link:JotForm Embed API Documentation
Preview:
6.Statistics and Analysis
Google Analytics
Function Description:
The Google Analytics API allows you to embed analytics tools into your project, helping you track and analyze user behavior and visit data.
How to Use:
Enter the Google Analytics tracking ID.
Customize the display style for reports and statistical data.
Help Link:Google Analytics Embed API Documentation
Preview ：The page cannot view the frontend (injection code can be viewed), but data can be viewed and monitored in Google Analytics
Facebook Pixel
Feature Description:
The Facebook Pixel API allows you to embed Facebook tracking code for ad targeting and website behavior analysis.
How to Use: Enter the Facebook Pixel code.
HeyBoss Parameter Settings:
Facebook Pixel ID:
Log in to Facebook Business.
Create a Pixel ID and copy it.
Paste the Pixel ID into the URL input field.
Notes: The Facebook Pixel will function as a tracking code and will not be visible on the user-facing frontend.
Help Link:Facebook Pixel Embed API Documentation
Preview : Data can be monitored in the Events Manager on the Facebook Meta backend.
Google Ads Pixel
Feature Description:
The Google Ads Pixel API allows you to embed ad tracking code into your project to track ad conversion rates and user behavior.
How to Use:
Enter the Google Ads tracking code.
Configure ad tracking and data analysis display.
Help Link:Google Ads Pixel Embed API Documentation
Preview :
The tracking code is not visible on the frontend.
Since there is no Google Ads account to view the data, you can check the website code to verify that the code has been successfully injected.
7.Music and media play
Spotify
Feature Description:
The Spotify API allows you to embed music, playlists, albums, etc., directly into your project, supporting music playback and interaction.
How to Use:
Enter the Spotify music link.
Configure playback settings, such as autoplay, loop, etc.
HeyBoss Parameter Settings:
Theme: The visual style or appearance of the interface.
Dark: A design style with dark backgrounds and light text, giving a calm, dramatic feel, often conveying a sense of sophistication or avant-garde.
Light: A design style with light backgrounds and dark text, offering a bright, fresh feeling, usually associated with simplicity and modernity.
Compact Mode: A layout option in Spotify that makes the interface more streamlined and space-efficient. When enabled, it reduces the visual elements, allowing you to focus more on the music itself.
Help Link:Spotify Embed API Documentation
Preview :
SoundCloud
Feature Description:
The SoundCloud API allows you to embed music or podcasts directly into your project, showcasing audio content and supporting playback.
How to Use:
Enter the SoundCloud music or podcast link.
Configure display styles and player settings.
Help Link:SoundCloud Embed API Documentation
Preview :
8.Design and Collaboration
Figma
Feature Description:
The Figma API allows you to embed Figma design files directly into your project, enabling designers and developers to share design interfaces, prototypes, and other content.
How to Use:
Enter the shared link of the Figma file.
Configure the display area of the design file, supporting interactive features such as viewing or commenting.
Help Link:Figma Embed API Documentation
Preview :
Function Description:
The Pinterest API allows you to embed images, pins, and boards from Pinterest into your project. It is ideal for sharing creative inspirations, image collections, and more.
How to Use:
Enter the Pinterest pin, board, or user profile link.
Customize the display style and size.
Note:
If the URL starts with "https://" but not "www", change it to "www".
Incorrect URL: https://uk.pinterest.com/pin/14707136280597851/
Correct URL: https://www.pinterest.com/pin/14707136280597851/
Help Link:Pinterest Embed API Documentation
Preview ：