Skip to content

feat(docs): add embedded widget guide#90

Merged
edakturk14 merged 3 commits intomainfrom
xaroz/embedded-widget
Apr 7, 2026
Merged

feat(docs): add embedded widget guide#90
edakturk14 merged 3 commits intomainfrom
xaroz/embedded-widget

Conversation

@Xaroz
Copy link
Copy Markdown
Contributor

@Xaroz Xaroz commented Mar 27, 2026

Added docs for a guide to install and use the warp widget package

@claude
Copy link
Copy Markdown

claude bot commented Mar 27, 2026

Claude finished @Xaroz's task in 3m 35s —— View job


Review Complete

  • Gather context and read changed files
  • Run documentation review
  • Post inline review comments

Submitted a consolidated PR review with 6 inline comments and a summary. Key findings:

  • Medium: Verify that @hyperlane-xyz/warp-widget, nexus.hyperlane.xyz/embed, and monorepo example paths exist before merging — these couldn't be confirmed
  • Low: Missing description in frontmatter; sparse Events table
  • Nitpick: Theme defaults table could note it applies to light mode; yarn missing from install options

Overall the guide is well-written and covers the right topics. See the PR review for inline details.

Copy link
Copy Markdown

@claude claude bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Review Summary

Well-structured guide covering React, Vanilla JS, theming, defaults, route filtering, events, self-hosting, and no-code iframe embed. Writing is clear and user-focused.

Main concern: The guide references @hyperlane-xyz/warp-widget (npm), nexus.hyperlane.xyz/embed (hosted URL), and monorepo example paths that I couldn't verify exist yet. If these are unreleased, ensure docs ship in sync with the package/endpoint or add a note about availability.

Observations Outside the Diff

  • docs/guides/warp-routes/bridge-ui-guide.mdx — Has a "Bridging Widget" section about Superbridge's widget. Consider adding a cross-link to this new embed-widget page for discoverability.

Comment thread docs/guides/warp-routes/embed-widget.mdx
Comment thread docs/guides/warp-routes/embed-widget.mdx
Comment thread docs/guides/warp-routes/embed-widget.mdx
Comment thread docs/guides/warp-routes/embed-widget.mdx
Comment thread docs/guides/warp-routes/embed-widget.mdx Outdated
Comment thread docs/guides/warp-routes/embed-widget.mdx
Copy link
Copy Markdown

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🧹 Nitpick comments (1)
docs/guides/warp-routes/embed-widget.mdx (1)

36-44: Add source links for listed defaults/constants to keep docs drift-proof.

The props/theme/events tables include concrete defaults and payload shapes, but there’s no source reference. A short link to the exact type/default definitions in warp-widget would make this safer to maintain.

As per coding guidelines: "Add links to confirm constants and thresholds referenced in documentation."

Also applies to: 96-106, 147-150

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@docs/guides/warp-routes/embed-widget.mdx` around lines 36 - 44, Add inline
source links from the prop/type tables to the authoritative definitions in the
warp-widget package so the docs stay in sync: link the WarpWidgetConfig type to
its exported type, link the default width/height strings to the corresponding
default constants (e.g., DEFAULT_WIDTH/DEFAULT_HEIGHT) or default export in
warp-widget, and link the onEvent payload/type to the exported event type (e.g.,
WarpWidgetEvent or OnEvent) so readers can jump to the exact definitions; update
the three tables referenced (props at the shown block and the blocks at 96-106
and 147-150) to include those short source links next to the Type/Default cells.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@docs/guides/warp-routes/embed-widget.mdx`:
- Around line 52-54: Check that the DOM element exists before passing it into
createWarpWidget: call document.getElementById('widget-root') into a local
variable, null-check it, and only call createWarpWidget with that element as the
container if it's non-null (otherwise handle the missing element path, e.g., log
an error or throw). Update the code around createWarpWidget and its container
argument to use this guarded variable so createWarpWidget never receives null.

---

Nitpick comments:
In `@docs/guides/warp-routes/embed-widget.mdx`:
- Around line 36-44: Add inline source links from the prop/type tables to the
authoritative definitions in the warp-widget package so the docs stay in sync:
link the WarpWidgetConfig type to its exported type, link the default
width/height strings to the corresponding default constants (e.g.,
DEFAULT_WIDTH/DEFAULT_HEIGHT) or default export in warp-widget, and link the
onEvent payload/type to the exported event type (e.g., WarpWidgetEvent or
OnEvent) so readers can jump to the exact definitions; update the three tables
referenced (props at the shown block and the blocks at 96-106 and 147-150) to
include those short source links next to the Type/Default cells.
🪄 Autofix (Beta)

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: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: b7d7c995-dcee-4d81-95c4-9fbd45fe9970

📥 Commits

Reviewing files that changed from the base of the PR and between 396388d and 0050ace.

📒 Files selected for processing (2)
  • docs.json
  • docs/guides/warp-routes/embed-widget.mdx

Comment thread docs/guides/warp-routes/embed-widget.mdx
- Add description frontmatter for SEO
- Link @hyperlane-xyz/warp-widget to npm
- Add yarn add to install instructions
- Add null-check in vanilla JS example
- Add embed widget as third option in bridge-ui-guide

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@claude
Copy link
Copy Markdown

claude bot commented Mar 27, 2026

Claude finished @Xaroz's task in 2m 30s —— View job


  • Gather context and read changed files
  • Run documentation review
  • Post inline review comments

Submitted a consolidated PR review with 4 inline comments and a summary. This is a follow-up review after the author addressed feedback from the first review.

All prior medium-severity items resolved — package confirmed on npm, hosted URL confirmed live, monorepo link verified, frontmatter description added, yarn install added, null guard added.

New findings (all low/nitpick):

  • Vanilla JS return type could document iframe as HTMLIFrameElement
  • Self-hosting * default warrants a security nudge
  • routes URL param format needs a concrete example
  • Self-closing <iframe /> may not work in CMS copy-paste scenarios

See the PR review for inline details.

@Xaroz
Copy link
Copy Markdown
Contributor Author

Xaroz commented Mar 27, 2026

Addressed review feedback:

  • Added description frontmatter
  • Linked to npm package
  • Added yarn install option
  • Added null-check in vanilla JS example
  • Added embed widget as third option in bridge-ui-guide
  • Skipped: light/dark defaults note (intentionally independent), future events note, URL/link verification (all confirmed live)

@coderabbitai
Copy link
Copy Markdown

coderabbitai bot commented Mar 27, 2026

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: f3265286-b959-4652-a656-cec34332fb52

📥 Commits

Reviewing files that changed from the base of the PR and between 5cc32c9 and c72f14e.

📒 Files selected for processing (1)
  • docs/guides/warp-routes/embed-widget.mdx
✅ Files skipped from review due to trivial changes (1)
  • docs/guides/warp-routes/embed-widget.mdx

📝 Walkthrough

Walkthrough

Added a new documentation guide for embedding the Hyperlane Warp bridge widget in external sites, updated docs navigation to include it, and amended the bridge UI guide to list embedding as an out-of-the-box option with a link to the new guide.

Changes

Cohort / File(s) Summary
Navigation and Reference Updates
docs.json, docs/guides/warp-routes/bridge-ui-guide.mdx
Inserted a new nav entry for the embed-widget guide and added embedding as a third "out-of-the-box" option in the bridge UI guide.
New Widget Embedding Guide
docs/guides/warp-routes/embed-widget.mdx
Added a comprehensive guide covering SDK install, React and vanilla DOM integrations, theme color format and defaults, transfer defaults, route filtering, events (including ready), self-hosting origin restrictions (NEXT_PUBLIC_EMBED_ALLOWED_ORIGINS), no-code iframe alternative with query params, and CSP/sandbox troubleshooting.
🚥 Pre-merge checks | ✅ 3
✅ Passed checks (3 passed)
Check name Status Explanation
Title check ✅ Passed The title clearly and concisely summarizes the main change: adding documentation for the embedded widget guide.
Description check ✅ Passed The description is directly related to the changeset, explaining that documentation was added for the warp widget installation and usage guide.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.


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

Comment @coderabbitai help to get the list of available commands and usage tips.

@Xaroz Xaroz requested review from edakturk14 and paulbalaji March 27, 2026 20:18
Copy link
Copy Markdown

@claude claude bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Review Summary

Good improvements since the last review — frontmatter description added, yarn install option included, null guard on getElementById, and npm link in the intro. All prior medium-severity items were resolved or confirmed by the author.

The guide is well-structured, covers the right surface area (React, Vanilla JS, theming, defaults, route filtering, events, self-hosting, no-code iframe, troubleshooting), and reads well. A few minor items remain below.

Observations Outside the Diff

  • docs/guides/warp-routes/bridge-ui-guide.mdx:140-142 — The Superbridge "Bridging Widget" section is nearby content. Consider adding a brief cross-link like "For Hyperlane's own embeddable widget, see Embedding the Bridge Widget" to improve discoverability between the two widget options.

Comment thread docs/guides/warp-routes/embed-widget.mdx Outdated
Comment thread docs/guides/warp-routes/embed-widget.mdx Outdated
Comment thread docs/guides/warp-routes/embed-widget.mdx
Comment thread docs/guides/warp-routes/embed-widget.mdx
- Note iframe return type is HTMLIFrameElement
- Add security nudge for wildcard embed origins
- Add routes param to iframe example
- Use explicit </iframe> closing tag for CMS compatibility

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@claude
Copy link
Copy Markdown

claude bot commented Apr 6, 2026

Claude finished @Xaroz's task in 3m 56s —— View job


  • Gather context and read changed files
  • Run documentation review
  • Post inline review comments

Submitted a consolidated PR review. This is the third review round — all prior feedback items have been resolved.

What was fixed since last review

  • HTMLIFrameElement return type documented in Vanilla JS section
  • Security note added for NEXT_PUBLIC_EMBED_ALLOWED_ORIGINS default
  • routes param added to iframe example URL
  • Self-closing iframe tag changed to explicit closing tag

Current state

No blocking issues remain. The guide covers React, Vanilla JS, theming, transfer defaults, route filtering, events, self-hosting, no-code iframe embed, and troubleshooting — all with accurate code examples and clear tables. Ready to merge.

See the PR review for details.

Copy link
Copy Markdown

@claude claude bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Third review round. All prior feedback items resolved. Guide is in good shape. Fixed since last review: HTMLIFrameElement return type documented, security note for NEXT_PUBLIC_EMBED_ALLOWED_ORIGINS, routes param in iframe URL, explicit iframe closing tag. No blocking issues remain.

Copy link
Copy Markdown
Collaborator

@edakturk14 edakturk14 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lgtm!

@edakturk14 edakturk14 merged commit 1a4553d into main Apr 7, 2026
6 checks passed
@Xaroz Xaroz deleted the xaroz/embedded-widget branch April 7, 2026 16:05
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants