DEMOS
This showcase is using Elementor Tabs element and the custom built Demos plugin. Each demo is implemented as a PHP class with their own tech stack and added in the respective tab as a shortcode.
See the details below.
The feedback form demo integrates Contact Form 7 plugin, Supabase backend, Gemini AI and Oracle Cloud Email Delivery service using Make.com.
Upon submission, the form data is captured, processed, and forwarded to be stored in the Supabase table via an API endpoint using PHP code. The table is set-up with a trigger that sends the inserted data to a Make.com webhook. A Make.com scenario is set-up to send the feedback to Google Gemini AI for Sentiment Analysis with the response categorized as Positive, Neutral, Negative, or Other. The feedback data and sentiment are then emailed to the recipient and sender.
Try it.
The data management demo integrates WordPress REST API with Xano backend. Full CRUD operations are implemented. Data management request is sent to the custom WordPress REST API, which forwards it to a Xano API endpoint. The entire process skips the WordPress DB and all data are stored in a Xano table.
Built using PHP, CSS, HTML, JavaScript, jQuery, jQuery Validation and Are-You-Sure plugins, SweetAlert2, and Tabulator.
Go ahead, fetch the data.
The search image demo integrates WordPress REST API with Xano, and Pexels APIs.
The keyword is submitted to the custom WordPress REST API that forwards the data to a Xano API endpoint, which in turn sends a request to the Pexels API. The image data received are displayed on a card in grid layout. Maximum of 12 images.
Built using PHP, CSS, HTML, JavaScript, jQuery, jQuery Validation plugin and SweetAlert2.
A basic implementation of an interactive video created using HTML5 Video tag, VideoJS + YouTube plugin, JavaScript, SweetAlert2, CSS, and HMTL. For simplicity, its limited to playing YouTube videos only.
The interaction occurs at 3, 5 and 7 seconds into the video. The first interaction, asks the user if they want to watch a new video or continue watching. If the user choose to change the video, a popup will ask for a YouTube URL. The second interaction is a call to action with a referral link, and the final interaction shows the Buy Me a Coffee link.
Go ahead, play the video and see it in action.
A demo of a Shopify cart reservation with expiration, built using the Shopify Buy Button widget, JavaScript, SweetAlert2, CSS, and HTML.
The product in the cart is reserved for 10 seconds, after which the product is removed and the cart is closed. The cart reservation script is a class that is instantiated and the object’s defined methods are integrated in the code of the Shopify Buy Button widget.
To find out how it works, wait for the “Add to cart” button to appear, and click it.
A random quote generator. The “quote” custom post type is created using the Advanced Custom Fields plugin. Built using PHP, CSS, HTML, JavaScript, jQuery, and SweetAlert2.
Refreshing sends a GET request to the custom WordPress REST API endpoint to return a randomly selected quote.
If there is a chance that something will happen… it will happen.
Demo of various utility widgets.
Tawk.to Live Chat, Complianz Cookie Consent and Sienna Accessibility: The widgets are placed at the bottom left of the page, but are initially hidden, except for the cookie consent. Toggle the specific widget by clicking its menu item in the footer section. One widget is visible at a time.
WebPushr Notification Bell: Appears only at the bottom right of a post. Subscribers are notified if a post is updated or published.
Shareaholic Social Sharing Buttons: Added at the top of the post content.
Checkout the notification bell and sharing buttons by reading a post in the blog. The custom PHP, JavaScript and CSS codes of the above widgets are implemented in the Code Snippets plugin.
GTranslate plugin: Translate by selecting any of the ten languages in the footer section.