https://github.com/lwcorp/iframe-bubble
Integrate any iframe as a Balloon/Bubble - including multiple ones simultaneously
https://github.com/lwcorp/iframe-bubble
iframe-embeds wordpress
Last synced: 9 months ago
JSON representation
Integrate any iframe as a Balloon/Bubble - including multiple ones simultaneously
- Host: GitHub
- URL: https://github.com/lwcorp/iframe-bubble
- Owner: lwcorp
- License: agpl-3.0
- Created: 2025-03-07T13:38:54.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-03-07T14:59:38.000Z (over 1 year ago)
- Last Synced: 2025-03-07T15:39:44.132Z (over 1 year ago)
- Topics: iframe-embeds, wordpress
- Language: HTML
- Homepage: https://lwcorp.github.io/iframe-bubble/
- Size: 13.7 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
If you like to embed an iframe in your website, but only as an overlay if a user clicks a bubble/balloon, then this is going to save you a lot of time.
Trying to integrate [embeddable AI chats](https://www.linkedin.com/posts/liorweissbrod_openai-chatgpt-aibusiness-activity-7287060823183675392-17Q7) raised the general question of how to **easily** integrate iframes as bubbles/ballons.
WordPress specifically has various related extensions, but none of them (not even Elementor) has direct support (at least for free) for bubbles/balloons turning to iframes.
# Goals
1. Allowing to embed any iframe in any website
1. Supporting simultaneous embedding
1. Avoiding loading iframes unless clicked upon
1. Using HTML shapes to avoid loading images
1. Animating the bubble/balloon opening the iframe
# Usage
1. Replace the text with your site's text.
1. Replace the `iframe` tags with your ones.
1. (Optionally) `dualchat` setting: control if you want multiple chats at the same time (default is no).
1. (Optionally) `chatlang` setting: choose which languages you want (default is all).
## WordPress
The WordPress version uses [add_action](https://developer.wordpress.org/reference/functions/add_action/) with [wp_enqueue_scripts](https://developer.wordpress.org/reference/functions/wp_enqueue_scripts/) and [wp_footer](https://developer.wordpress.org/reference/functions/wp_footer/) to add the CSS/JS and HTML respectively.
It can be applied easily with an extension like [Code Snippets](https://wordpress.org/plugins/code-snippets/).
# Demo
You can try your own iframe and settings in a live demo via the link in the About section.
# Screenshot
