DeskPress provides 6 native Elementor widgets with full style controls, so you can build your support pages visually using Elementor's drag-and-drop editor. No shortcode knowledge required.
How to Enable
The Elementor integration is automatic. When Elementor is active on your site, the DeskPress widgets appear in the "DeskPress" category in the Elementor widget panel. No settings to configure.
Configuration Walkthrough
Finding the Widgets
- Open any page in the Elementor editor.
- In the widget panel on the left, search for "DeskPress" or scroll to the DeskPress category.
- Drag any widget onto your page.
General Workflow
- Drag a DeskPress widget onto your page layout.
- In the Content tab, configure the widget's functional settings (like which collection to use or which mailbox to target).
- In the Style tab, fine-tune the appearance using Elementor's standard style controls.
- Preview your page to see the widget in action.
Available Widgets
1. Chatbot Widget
Embeds the AI chatbot on your page.
- Shortcode equivalent:
[hsd_chatbot] - Content controls: Height slider (200--1000px)
- Style tabs: Container, Header, Messages, Input Area, Handoff Button, Citations
2. Docs Widget
Displays a searchable documentation browser with topic cards.
- Shortcode equivalent:
[hsd_docs] - Content controls: Collection ID, search placeholder text, show/hide topics toggle
- Style tabs: Search Input, Results Dropdown, Topic Cards
3. Docs Search Widget
A standalone documentation search bar with a results dropdown.
- Shortcode equivalent:
[hsd_docs_search] - Content controls: Collection ID, search placeholder text
- Style tabs: Search Input, Results Dropdown
4. Support Form Widget
The full support ticket submission form.
- Shortcode equivalent:
[hsd_form] - Content controls: Mailbox ID, Collection ID
- Style tabs: Form, Labels, Inputs, Textarea, Button, Attachment, Product Info, Messages
5. Opening Hours Widget
Shows your team's availability schedule and current status.
- Shortcode equivalent:
[hsd_opening_hours] - Content controls: Show status toggle, show schedule toggle
- Style tabs: Container, Status, Schedule, Header
6. Conversations Widget
Displays a table of the current user's support conversations.
- Shortcode equivalent:
[helpscout_desk] - Content controls: Mailbox ID
- Style tabs: Container, Table Header, Table Rows, Status Badges, Empty State
Settings Reference
| Widget | Key Settings | Shortcode |
|---|---|---|
| Chatbot | Height | [hsd_chatbot] |
| Docs | Collection ID, placeholder, show topics | [hsd_docs] |
| Docs Search | Collection ID, placeholder | [hsd_docs_search] |
| Support Form | Mailbox ID, Collection ID | [hsd_form] |
| Opening Hours | Show status, show schedule | [hsd_opening_hours] |
| Conversations | Mailbox ID | [helpscout_desk] |
Tips and Common Questions
Q: Do I need to know shortcodes to use these widgets?
No. The Elementor widgets handle everything visually. However, each widget uses the same shortcode under the hood, so all shortcode features and developer hooks still apply.
Q: Can I see a preview while editing in Elementor?
Yes. All DeskPress widgets show a placeholder preview in Elementor's edit mode so you can see how they fit in your layout.
Q: How do I adjust the widget for mobile?
Use Elementor's built-in responsive controls. Click the device icons at the bottom of the editor to switch between desktop, tablet, and mobile views, then adjust the DeskPress widget's style settings for each breakpoint.
Q: Can I use multiple DeskPress widgets on the same page?
Absolutely. A common setup is to combine the Chatbot, Support Form, and Docs widgets on a single support page for a complete self-service experience.
Q: The widgets don't appear in the Elementor panel.
Make sure Elementor is fully active and up to date. The DeskPress widgets are registered when Elementor loads, so deactivating and reactivating Elementor can sometimes resolve detection issues.
Q: Where do I find the Collection ID or Mailbox ID?
- Collection ID: In Help Scout Docs, open a collection and check the URL. The ID is in the URL.
- Mailbox ID: In Help Scout, go to Manage > Mailboxes, select a mailbox, and check the URL.
Related documentation: