Redesign embedded Arcade widget

[hoangsvit]

Summary

• redesign /widget as a compact horizontal promo card instead of a mini landing page
• reduce vertical height so it fits naturally inside Hashnode articles
• make the entire widget clickable while keeping a clear Check your score CTA
• improve mobile layout and very-small-screen behavior
• retain automatic light/dark appearance
• suppress the cookie notice specifically on /widget, including PR preview mode

Why

The previous widget consumed too much vertical space inside articles and looked like a separate page. The embed should read as a lightweight native promo card instead.

No direct changes were made to main.

Summary by CodeRabbit

• New Features

  • Redesigned the embed widget with a compact card layout, updated branding, feature highlights, and call-to-action.
  • Added support for validated destination URLs and UTM tracking parameters.
  • Improved responsive behavior for smaller screens.

• Bug Fixes

  • Cookie consent notices no longer appear on widget pages.
  • Added safer handling for invalid or unsupported destination URLs.

[qodo-code-review]

Qodo reviews are paused for this user.

Troubleshooting steps vary by plan Learn more →

On a Teams plan?
Reviews resume once this user has a paid seat and their Git account is linked in Qodo.
Link Git account →

Using GitHub Enterprise Server, GitLab Self-Managed, or Bitbucket Data Center?
These require an Enterprise plan - Contact us
Contact us →

[coderabbitai]

Warning

Review limit reached

@hoangsvit, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 58 minutes

You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository.

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: a6bcc67d-deeb-4567-aae9-ce15123d2ecd

📥 Commits

Reviewing files that changed from the base of the PR and between aac65f0 and 5a625a5.

📒 Files selected for processing (4)

• app/widget/widget.css
• components/arcade/arcade-embed-widget.tsx
• components/privacy/cookie-consent.tsx
• components/theme-toggle.tsx

📝 Walkthrough

Walkthrough

The Arcade widget now validates configurable HTTP(S) targets, applies sanitized UTM parameters, and renders a compact linked card. Responsive CSS updates stack content on narrow screens. Cookie consent is disabled on widget routes.

Changes

Arcade widget

Layer / File(s)	Summary
Validated target and linked card components/arcade/arcade-embed-widget.tsx	The widget validates the url parameter, applies sanitized UTM values, and renders a single linked card with updated content and icons.
Responsive card styling app/widget/widget.css	The CSS defines the compact card layout, responsive CTA stacking, small-screen description hiding, and light-mode styles.
Widget route consent handling components/privacy/cookie-consent.tsx	Cookie consent is disabled for /widget routes. Existing consent and localization behavior remains unchanged elsewhere.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Sequence Diagram(s)

sequenceDiagram
  participant Browser
  participant ArcadeEmbedWidget
  participant parseTargetUrl
  participant TargetSite
  Browser->>ArcadeEmbedWidget: provides url and UTM query parameters
  ArcadeEmbedWidget->>parseTargetUrl: validates the target URL
  parseTargetUrl-->>ArcadeEmbedWidget: returns the validated target or fallback
  ArcadeEmbedWidget->>TargetSite: opens the target with sanitized UTM parameters

Loading

Possibly related PRs

• ePlus-DEV/gcsb-web#40: Revises the same /widget page CSS and ArcadeEmbedWidget component.
• ePlus-DEV/gcsb-web#2: Updates the same Arcade widget area.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and concisely describes the main change: redesigning the embedded Arcade widget.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/widget-embed-design

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[github-actions]

🧹 PR preview removed

The preview for this pull request was removed after the PR was closed.

[coderabbitai]

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@components/arcade/arcade-embed-widget.tsx`:
- Around line 24-31: Initialize ctaUrl in the arcade embed widget to the same
static fallback value for both server and initial client renders, then move the
window.location.search parsing and UTM customization into a useEffect that
updates ctaUrl after hydration. Preserve the existing parseTargetUrl and
sanitizeUtm behavior for the post-mount URL.

In `@components/privacy/cookie-consent.tsx`:
- Line 28: Update the isEmbedWidget path check to recognize only the root
/widget route and explicitly supported localized or base-path widget variants;
do not rely on broad pathname.endsWith("/widget") or endsWith("/widget/") checks
that classify unrelated routes such as /privacy/widget.

🪄 Autofix

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 312d8eff-0d5f-4249-ba84-ab955068fc68

📥 Commits

Reviewing files that changed from the base of the PR and between e85bf91 and aac65f0.

📒 Files selected for processing (3)

• app/widget/widget.css
• components/arcade/arcade-embed-widget.tsx
• components/privacy/cookie-consent.tsx