Definition

The Web Widget allows you to embed and display any public web page or online resource directly inside your Zenphi dashboard. This widget renders the entire page within the widget space, giving users real-time access to external content without leaving the dashboard interface.

With only a single field to configure — the URL — this widget is incredibly flexible yet powerful. Whether you're embedding an interactive web form, showing a document, displaying an image, or linking to another tool or service, the Web Widget turns your dashboard into a live hub of resources and interactivity.

🔑 Key Capabilities:

• Display web pages such as Google Forms, Zenphi Forms, policy documentation, knowledge base articles, or any URL-based interface.
• Show images (e.g., guides, banners, charts, or QR codes) using direct image URLs.
• Embed portals, microsites, or dashboards from other platforms, like BI tools or scheduling tools.
• Centralize external resources inside your dashboard to reduce context switching and streamline access.
• Read-only and real-time — no sync required, just the live content directly from the web.

⚠️

Note: The web content must be publicly accessible or hosted in a way that allows embedding (i.e., it must not block iframe loading).

Example Use Cases

The Web Widget offers unmatched flexibility by embedding any public or authorized web content directly into your Zenphi dashboard. Below are some powerful and creative ways you can use it:

1. Embed Zenphi Forms for Inline Data Collection

Display a Zenphi Form directly inside your dashboard so users can submit requests, feedback, or approvals without leaving the dashboard environment.Example: A team member can submit a leave request or an expense reimbursement from within the dashboard.

2. Embed Analytics Dashboards (Looker Studio, Power BI, Tableau)

Show real-time reports or data visualizations by embedding external dashboards.Example: Your executive team sees a live KPI report or sales funnel overview embedded in their dashboard view.

3. Show Internal Knowledge Base or Help Articles

Provide quick access to help content or process documentation hosted on platforms like Confluence, Notion, or your own site.Example: Embed a “How to Request Procurement” guide next to your procurement automation workflows.

4. Display Google Forms, Typeform, or Jotform Surveys

Run quick polls, gather feedback, or execute audits using third-party form tools.Example: After an onboarding flow is completed, embed a Google Form asking for training satisfaction feedback.

5. Display Images, Diagrams, or Visual Assets

Embed an image via a direct URL — ideal for reference charts, org charts, banners, or status visualizations.Example: Embed a visual workflow diagram to help users understand an approval or escalation process.

6. Show an Embedded Navigation or Portal Page

Use a central HTML page with links/buttons to create a dashboard-based navigation system.Example: Create a “Start Here” widget that links to other Zenphi detail pages, guides, or dashboards.

7. Stream Internal Announcements or External Media

Embed media-rich content such as YouTube videos or Vimeo tutorials that explain processes or share company updates.Example: Show a video walk-through of how to use a new internal automation process.

8. Display a Custom-Built HTML Page or Web App

Show any custom-built tool or page — like a calculator, reference tool, or interactive map — that supports iframe embedding.Example: Embed a small internal application built by your dev team to track live system statuses.

9. Show Company News or Internal Updates

Link to an internal blog, news feed, or bulletin board for real-time updates.Example: Keep employees updated with an embedded “What’s New at Zenphi” blog page or company newsletter.

Configuration

The Web Widget’s configuration is straightforward yet versatile, designed to effortlessly integrate external web content into your Zenphi dashboard. The primary and only required setting is the URL, which dictates what web page or resource will be displayed within the widget frame.

1. URL (Page URL to Display)

Enter the full web address (URL) of the page or resource you want to embed inside the widget.

Supported URLs:

• Any public webpage (e.g., https://www.example.com).
• Web-based forms (Google Forms, Zenphi Forms, Typeform, Microsoft Forms, etc.).
• Online documentation, tutorials, or guides (e.g., wiki pages, knowledge bases).
• Direct image URLs (e.g., ending with .jpg, .png, .gif) to display standalone pictures, banners, or infographics.
• Other dashboards, BI tools, scheduling tools, or portals that allow embedding via URL.

Best Practices:

• Ensure the URL is accessible without login or proper embedding permissions are configured (i.e., the site allows iframe embedding).
• Avoid URLs that automatically redirect or require authentication unless those credentials are handled externally.
• Use HTTPS URLs for security and to avoid browser warnings.

2. Input Validation

• The system checks for a valid URL format.
• Invalid URLs or URLs pointing to unsupported protocols will be rejected or result in a blank widget.

3. Rendering & Responsiveness

• The widget dynamically loads the webpage inside an iframe.
• The embedded page adapts to the size of the widget; resizing the widget will adjust the content view accordingly.
• Scrollbars appear automatically if the embedded content exceeds the visible widget area.

4. Security Considerations

• To prevent clickjacking and security risks, some websites may restrict iframe embedding. If the URL refuses to load inside the widget, check the source site’s X-Frame-Options or Content Security Policy.

Example Configurations:

By simply entering a URL, the Web Widget transforms your dashboard into a versatile, centralized portal, delivering essential external content alongside your internal data — all in one place.

Appearance

The Web Widget is visually adaptable to match the layout and design of your dashboard. Although its core function is to display a web page or visual content, its appearance settings help control how it blends into or stands out from the rest of your dashboard interface.

1. Show Widget Border?

Toggles whether a visible border appears around the widget.

• Enabled: Gives the widget a clearly defined container, making it feel like a standalone section — useful for highlighting instructions, guides, or embedded dashboards.
• Disabled: Removes the border, allowing the widget to flow seamlessly with other elements — ideal for minimalist layouts or when the embedded content already has visual framing.

For example, disabling the border works well when displaying a Zenphi Form or a visual process chart, keeping the user’s attention focused entirely on the content.

2. Show Widget Title?

Allows you to show or hide the title that appears at the top of the widget.

• Enabled: Recommended when you want to label or contextualize the web content (e.g., “Submit Your Feedback Here” or “Q3 KPI Dashboard”).
• Disabled: Useful when the embedded content already has a clear header or when space-saving is important on the dashboard.

Example Scenario: Embedding a Zenphi Form for Leave Requests

Let’s say you're building an internal HR Dashboard to centralize key employee functions, like requesting time off, accessing policies, and viewing approval statuses.

Instead of directing employees to another system or sending them to a separate Zenphi form URL, you decide to embed the Leave Request Form directly inside the dashboard using the Web Widget.

How it Works:

• You configure a Web Widget on your HR Dashboard.
• In the widget settings, you paste the URL of the Zenphi Form created for leave requests.
• You optionally hide the widget border for seamless integration.
• You title the widget: “🗓 Submit Leave Request”.

Now, employees can:

• Fill in the form directly within the dashboard without leaving Zenphi.
• Submit their request, which triggers a Zenphi workflow behind the scenes (like manager approval and calendar updates).
• View their submission status using a Grid Widget in the same dashboard.

Why it’s powerful:

• No navigation confusion. Everything is in one dashboard.
• It reduces time-to-action by streamlining user interactions.
• It enhances adoption of automation processes — users are more likely to engage when the experience is smooth and embedded.

Pro Tip: You can place a visual process diagram (as a separate Web Widget) right next to the form for new users to understand what happens after submission.