Integrate Discko.io forms into WordPress with customizable floating button or iframe embed options.
Discko allows you to seamlessly integrate your Discko.io forms into your WordPress website. Choose between two display modes:
Floating Button Mode
Display a customizable floating button that opens your Discko form in a beautiful modal overlay. Perfect for keeping your form accessible on every page without taking up valuable screen space.
Iframe Mode
Embed your Discko form directly on any page using a shortcode or Elementor widget. Ideal for dedicated contact or appointment pages.
Features
- Two Display Modes: Choose between floating button or iframe embed
- 6-Position Button Placement: Place your button anywhere – top/bottom × left/middle/right
- Advanced Icon Cropping: Built-in drag-and-drop crop tool with circular preview
- Real-Time Live Preview: See exactly how your button will look while configuring
- Fully Customizable Button: Adjust size, position, colors, and animations
- Smart Bubble Positioning: Tooltip automatically positions itself based on button location
- Hover Tooltip: Show custom messages when users hover over the button
- Custom Icon Upload: Use your own brand icon with professional cropping tools
- Page Exclusions: Control where the button appears by page type or specific page IDs
- Modal Customization: Configure mobile modal dimensions
- Elementor Integration: Drag-and-drop widget for Elementor page builder
- Shortcode Support: Simple shortcode for use in any page or post
- Responsive Design: Works perfectly on desktop, tablet, and mobile devices
- Translation Ready: Fully translatable with .pot file included
- French Translation: Complete French translation included
Display Modes
Floating Button
* Customizable size (40-100px)
* 6 position options: Top/Bottom × Left/Middle/Right
* Adjustable distance from all 4 edges (top, bottom, left, right)
* Advanced icon cropping tool with drag-and-drop interface
* Custom icon support (PNG, WebP, SVG) with circular crop preview
* Smart hover bubble that positions itself based on button location
* Hover bubble with custom text and color
* Real-time live preview in admin settings
* 4 animation styles: Pulse, Scale, Bounce, or None
* Opens form in responsive modal overlay
Iframe Embed
* Use shortcode: [discko_iframe]
* Customize height: [discko_iframe height="800"]
* Elementor widget with visual controls
* Adjustable borders and shadows in Elementor
* Responsive design
Page Exclusions (Button Mode)
Control where the floating button appears:
* Exclude by page type: 404 pages, archives, search results, attachments, single posts, or pages
* Exclude specific pages by ID
* Perfect for checkout pages, thank you pages, or any page where you don’t want the button
Use Cases
- Appointment booking forms
- Contact forms
- Lead generation
- Customer support
- Consultation requests
- Quote requests
- Event registration
- Service requests
Requirements
- WordPress 5.8 or higher
- PHP 7.4 or higher
- Active Discko.io account with form URL
- For Elementor integration: Elementor plugin installed
Additional Information
Support
For support, please visit discko.io/support or contact us through our website at discko.io.
Documentation
Full documentation is available at docs.discko.io.
Privacy Policy
This plugin does not collect, store, or transmit any user data. All form submissions are handled directly by Discko.io according to their privacy policy.
Third-Party Service
This plugin integrates with Discko.io, a third-party service for form creation and appointment booking. By using this plugin, you are embedding forms from Discko.io on your website.
- Service: Discko.io
- Website: https://discko.io
- Privacy Policy: https://discko.io/privacy
- Terms of Service: https://discko.io/terms
The plugin loads form content via iframe from Discko.io servers. No data is sent to Discko.io by this plugin itself – all form interactions happen directly between your website visitors and Discko.io.
FAQ
Where do I get my Discko form URL?
Log in to your Discko.io account at app.discko.io and copy your form URL. It typically looks like: https://app.discko.io/form/xxx.../new
How do I customize the button appearance?
Go to Settings > Discko, select “Floating Button” mode, and you’ll find options to customize size, position, colors, icon, hover text, and animations.
Can I exclude the button from specific pages?
Yes! In the Button Settings section, you can exclude pages by ID (e.g., “12, 45, 78”) or by page type (404, archives, search, etc.).
Can I position the button anywhere on my site?
Absolutely! Version 1.1.0 introduces 6 position options: Top Left, Top Middle, Top Right, Bottom Left, Bottom Middle, and Bottom Right. You can also adjust the exact distance from each edge (top, bottom, left, right) to fine-tune the placement.
Does this work with Elementor?
Yes! When using Iframe mode, you can use the “Discko Form” widget in Elementor with full visual customization options.
How do I use the shortcode?
Simply add [discko_iframe] to any page or post. You can customize the height with [discko_iframe height="800"].
Is the plugin translation ready?
Yes! The plugin is fully translation ready and includes complete English & French translations.
Can I use a custom icon for the button?
Yes! In Button Settings, click “Choose an Icon” to upload your own PNG, WebP, or SVG icon. Recommended size is 256x256px with transparent background. The plugin includes an advanced cropping tool that lets you position and zoom your icon perfectly with a circular crop preview.
Does this work on mobile devices?
Yes! The plugin is fully responsive and works on all devices. You can even customize the modal dimensions specifically for mobile devices.
Will this slow down my website?
No. The plugin only loads minimal CSS and JavaScript on pages where it’s active, and assets are versioned for optimal caching.
ChangeLog
1.3.0
New Features
* Gutenberg block: Added native “Discko Form” block for the WordPress block editor
* Gutenberg block: Configure iframe height, width, primary color, font family, border radius, and alignment directly from the block sidebar
Bug Fixes
* Fixed modal primary color not applying to the close button hover state
* Close button now correctly uses the configured primary color via CSS variable
1.2.0
New Features
* Modal form styling: Added primary color and font family customization for the floating button modal
* Modal size customization: Configure desktop and mobile dimensions separately with px/% or vw/vh units
* Elementor widget styling: Enabled primary color and font family options in Elementor widget
* Searchable font selector: Select2-powered font dropdown with 1400+ fonts when Elementor is installed
Enhancements
* Elementor-style size inputs: Number fields with unit selector (px, %, vw, vh) for modal dimensions
* Smart default values: Empty fields show placeholder with default values (Desktop: 50%×60%, Mobile: 85vw×50vh)
* Improved admin UI: Reorganized Modal Customization section with Form Style and Size cards
Technical
* Added 8 new settings for modal dimensions (desktop/mobile × width/height × value/unit)
* New settings for modal styling: discko_modal_primary_color, discko_modal_font_family
* Added Select2 library for enhanced font selection
* New sanitization functions with automatic default value fallback
1.1.1
Enhancements
* New collapsible live preview with toggle button for a cleaner admin interface
* Renamed “Top/Bottom Middle” positions to “Top/Bottom Center” for clarity
* Improved admin preview positioning to accurately reflect actual website behavior
Bug Fixes
* Fixed button position when distance value is set to 0 (was incorrectly treated as empty)
* Fixed bubble appearing on wrong side for center positions
* Fixed margin fields visibility for center positions (only shows relevant distances)
1.1.0 (2026-01-13)
New Features
* Added 6-position button placement system: Top Left, Top Middle, Top Right, Bottom Left, Bottom Middle, Bottom Right
* New visual corner selection UI with cards in admin settings
* Advanced icon cropping tool with drag-and-drop circular crop area and corner handles
* Real-time live preview of button appearance in admin settings
* Canvas-based icon crop preview with high-quality rendering
* Support for all 4 edge distances (top, bottom, left, right)
* Dynamic margin fields that show/hide based on selected corner position
Enhancements
* Reorganized admin interface into cleaner two-column card layout
* Improved visual hierarchy with better spacing and card styling
* Smart bubble positioning: bubble now appears on opposite side from button
* Bubble arrow direction automatically adjusts based on button position
* Icon cropping applied directly on frontend using canvas rendering
* Added “Apply Crop” and “Reset Crop” buttons with loading states
* Better handling of middle positions with horizontal centering
Bug Fixes
* Fixed bubble positioning when button is on left corners
* Removed load_plugin_textdomain() for WordPress.org compliance (automatic translation loading since WP 4.6+)
* Fixed bubble arrow direction for all button positions
* Improved visual consistency with Discko orange brand color
Technical
* Added 4 new settings: discko_button_corner, discko_button_position_top, discko_button_position_left, discko_icon_crop_data
* New sanitization methods: sanitize_button_corner(), sanitize_crop_data()
* Enhanced JavaScript with crop canvas manipulation and live preview functions
* Added 15+ new translatable strings for new features
* Optimized canvas rendering with high-quality image smoothing
1.0.0 (2024-12-15)
- Initial release
- Dual display modes: Floating Button and Iframe embed
- Floating button with drag and drop positioning
- Modal with iframe integration
- Iframe shortcode
[discko_iframe]
- Elementor widget integration
- localStorage position persistence
- 4 hover animation styles
- Page exclusion options (by ID or type)
- Custom icon upload support
- Hover bubble with customizable text and color
- Mobile-responsive modal dimensions
- Complete French translations
- Modern admin UI with Discko design system
