# Constell Widget - WordPress Plugin

A WordPress plugin that allows you to easily embed the Constell widget on your website with full configuration options through an intuitive admin interface.

## Description

The Constell Widget plugin provides a seamless integration of the Constell event venue booking widget into your WordPress site. Configure all widget attributes through an easy-to-use admin panel and display the widget globally or on specific pages using shortcodes.

### Features

- **Full Widget Configuration** - Configure all Constell widget attributes from the WordPress admin
- **Global Widget Display** - Show the widget automatically on all pages or specific locations
- **Flexible Shortcode** - Use `[constell-widget]` to display the widget anywhere
- **Tabbed Admin Interface** - Organized settings page with General, Appearance, Guest & Budget, and Display Rules tabs
- **Smart Display Rules** - Choose to show the widget on all pages, homepage only, or specific pages/post types
- **Customizable Appearance** - Set brand colors, button labels, position, and offsets
- **Guest & Budget Ranges** - Configure min/max values and steps for guest and budget selectors
- **Override Support** - Shortcode attributes can override global settings
- **Clean Uninstall** - Removes all data from database on plugin deletion

## Installation

### Automatic Installation

1. Log in to your WordPress admin panel
2. Navigate to **Plugins → Add New**
3. Search for "Constell Widget"
4. Click **Install Now** and then **Activate**

### Manual Installation

1. Download the plugin ZIP file
2. Navigate to **Plugins → Add New → Upload Plugin**
3. Choose the downloaded ZIP file and click **Install Now**
4. After installation, click **Activate Plugin**

### From Source

1. Clone or download this repository
2. Copy the `constell-widget` folder to `/wp-content/plugins/`
3. Activate the plugin through the WordPress admin panel

## Configuration

### Required Settings

After activation, configure the plugin:

1. Navigate to **Settings → Constell Widget**
2. Enter your **Venue ID** (required) - Your Constell venue UUID
3. Configure other options as needed
4. Click **Save Changes**

### Settings Tabs

#### General Settings
- **Venue ID** (required) - Your Constell venue UUID
- **Language** - Widget localization (Dutch or English)
- **Widget Position** - Screen position (bottom-right, bottom-center, etc.)

#### Appearance
- **Brand Color** - Custom color for widget theme
- **Button Label** - Custom text for open button
- **Close Button Label** - Custom text for close button
- **Horizontal/Vertical Offset** - Pixel adjustments for positioning

#### Guest & Budget
- **Minimum/Maximum Guests** - Guest range configuration
- **Guest Amount Step** - Increment value for guest selection
- **Minimum/Maximum Budget** - Budget range in Euros
- **Budget Step** - Increment value for budget selection

#### Display Rules
- **Enable Global Widget** - Show widget site-wide
- **Display On** - All pages, homepage only, or specific pages/post types
- **Specific Pages** - Select individual pages
- **Post Types** - Choose which post types show the widget
- **Custom Page IDs** - Comma-separated list of page/post IDs

## Usage

### Global Display

To show the widget globally:

1. Go to **Settings → Constell Widget**
2. Navigate to the **Display Rules** tab
3. Check **Enable Global Widget**
4. Choose where to display:
   - **All Pages** - Shows on entire site
   - **Homepage Only** - Shows only on front page
   - **Specific Pages/Post Types** - Select specific locations
5. Save changes

### Shortcode Usage

#### Basic Shortcode

Display the widget using global settings:

```
[constell-widget]
```

#### Shortcode with Custom Attributes

Override global settings for specific pages:

```
[constell-widget locale="en" position="top-right"]
```

#### Full Example with All Attributes

```
[constell-widget 
    venue="018fe794-d2b3-7370-955d-f68b7880d224"
    locale="en"
    position="top-right"
    offset-x="20"
    offset-y="20"
    brand-color="#FF6B6B"
    button-label="Get Quote"
    button-label-close="Close"
    min-guest-amount="10"
    max-guest-amount="500"
    guest-amount-step="5"
    min-budget-amount="1000"
    max-budget-amount="50000"
    budget-step="250"]
```

### Available Shortcode Attributes

| Attribute | Type | Default | Description |
|-----------|------|---------|-------------|
| `venue` | string | From settings | Venue UUID |
| `locale` | string | nl | Language (nl, en) |
| `position` | string | bottom-right | Widget position |
| `offset-x` | number | 0 | Horizontal offset (px) |
| `offset-y` | number | 0 | Vertical offset (px) |
| `brand-color` | string | - | CSS color value |
| `button-label` | string | - | Open button text |
| `button-label-close` | string | - | Close button text |
| `min-guest-amount` | number | 0 | Minimum guests |
| `max-guest-amount` | number | 1000 | Maximum guests |
| `guest-amount-step` | number | 1 | Guest increment |
| `min-budget-amount` | number | 0 | Minimum budget (€) |
| `max-budget-amount` | number | 25000 | Maximum budget (€) |
| `budget-step` | number | 100 | Budget increment (€) |

### Position Values

- `bottom-right` - Bottom right corner (default)
- `bottom-center` - Bottom center
- `bottom-left` - Bottom left corner
- `top-right` - Top right corner
- `top-center` - Top center
- `top-left` - Top left corner

### Locale Values

- `nl` - Dutch (Netherlands) - default
- `en` - English

## Examples

### Example 1: Event Venue Homepage

Show the widget on your homepage with custom branding:

```
[constell-widget 
    brand-color="#2E8B57"
    button-label="Boek Nu"
    position="bottom-right"]
```

### Example 2: Contact Page with English

Display English version on your contact page:

```
[constell-widget 
    locale="en"
    button-label="Request Quote"
    position="top-right"]
```

### Example 3: Corporate Events Section

Configure for large corporate events:

```
[constell-widget 
    min-guest-amount="50"
    max-guest-amount="1000"
    guest-amount-step="10"
    min-budget-amount="5000"
    max-budget-amount="100000"
    budget-step="500"]
```

## Requirements

- **WordPress Version:** 5.0 or higher
- **PHP Version:** 7.2.24 or higher (8.3+ recommended)
- **MySQL Version:** 5.5.5 or higher (8.0+ or MariaDB 10.6+ recommended)

## Frequently Asked Questions

### Where do I get my Venue ID?

Contact Constell support or check your Constell dashboard for your unique venue UUID.

### Can I use multiple widgets on the same page?

Yes! You can use the shortcode multiple times with different configurations.

### Does the widget work with caching plugins?

Yes, the widget is compatible with most caching plugins as it loads via JavaScript.

### Can I customize the widget appearance?

Yes, use the `brand-color` attribute to match your site's branding. Additional styling can be done via CSS.

### How do I hide the widget on specific pages?

1. Disable global widget display
2. Use the shortcode only on pages where you want the widget to appear

### Does it work with page builders?

Yes, the plugin works with all major page builders (Elementor, Divi, Beaver Builder, etc.) through the shortcode.

## Troubleshooting

### Widget not appearing

1. Check that you've entered a valid Venue ID
2. Verify the widget is enabled in Display Rules
3. Check if the current page matches your display rules
4. Clear browser and site cache
5. Check browser console for JavaScript errors

### Widget appearing in wrong position

Adjust the `offset-x` and `offset-y` values to fine-tune the position.

### Styling conflicts

The widget uses shadow DOM to avoid style conflicts, but you can add custom CSS if needed.

## Support

For support, please visit:
- Constell Documentation: https://widget.constell.com/docs/
- Plugin Support: Contact your WordPress administrator

## Changelog

### 1.0.1 - 2026-01-21
- **Fixed:** Critical issue where JavaScript widget script was not loading when using shortcode
- **Fixed:** Refactored instance architecture to use shared public class instance
- **Fixed:** Added explicit script enqueuing in shortcode renderer
- **Fixed:** Prevented duplicate script enqueuing with proper checks
- **Improved:** Widget now properly embeds and displays in all usage scenarios (shortcode and global)

### 1.0.0 - 2025-12-22
- Initial release
- Full widget configuration interface
- Shortcode support with attribute overrides
- Display rules (global, homepage, specific pages)
- Tabbed admin interface
- Color picker integration
- Multi-language support (NL, EN)

## Credits

- Plugin developed for Constell
- Uses Constell Widget: https://widget.constell.com

## License

This plugin is licensed under the GPL v2 or later.

```
Copyright (C) 2025 Constell

This program is free software; you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation; either version 2 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
```