docs: clean up widget pages and document widget-react by raq0x · Pull Request #642 · cowprotocol/docs

raq0x · 2026-07-09T09:31:28Z

Description

The widget overview page (Integrate section) had drifted out of sync with the widget tutorial, and some tutorial examples were broken when copy-pasted. The React wrapper was not documented at all.

Changes

Restructured integrate/widget.mdx to match the other integrate pages and removed duplicated examples
Fixed broken tutorial examples (createCowSwapWidget return value usage, missing container declarations)
Documented @cowprotocol/widget-react
Fixed a dead link, made internal links relative, fixed typos

Summary by CodeRabbit

Documentation
- Clarified widget positioning as a generic, ready-to-use component.
- Updated Quick Start TypeScript examples to use pixel-based width/height (via rootStyle) and corrected appCode placeholders.
- Added/expanded React integration guidance, including using the React wrapper package and CowSwapWidget usage.
- Refreshed tutorial snippets: corrected typos, improved standalone wallet/provider wording, and expanded configuration, events, and widget updating examples (including updateParams flow and container wiring).

vercel · 2026-07-09T09:31:35Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
docs	Ready	Preview	Jul 15, 2026 7:36am

github-actions · 2026-07-09T09:31:38Z

All contributors have signed the CLA ✍️ ✅
_{Posted by the CLA Assistant Lite bot.}

coderabbitai · 2026-07-09T09:32:14Z

📝 Walkthrough

Walkthrough

Documentation updates cover the CoW Widget overview and tutorial, including generic component wording, React integration guidance, corrected configuration examples, container lookups, appCode placeholders, token typing, and updateParams usage.

Changes

Widget Documentation Refresh

Layer / File(s)	Summary
Widget overview and configuration guidance `docs/cow-protocol/integrate/widget.mdx`	The overview uses generic component wording, pixel-string dimensions, React package guidance, and an expanded customization list.
Quick start and React integration `docs/cow-protocol/tutorials/widget/widget.md`	The quick start placeholder is corrected and React installation and `CowSwapWidget` usage are documented.
Partner fee and wallet examples `docs/cow-protocol/tutorials/widget/widget.md`	Partner fee wording and examples are corrected, widget container lookups are added, and standalone wallet-provider behavior is clarified.
Customization, events, and widget updates `docs/cow-protocol/tutorials/widget/widget.md`	Customization examples are corrected, `customTokens` uses `TokenInfo[]`, the events example gets a container lookup, and updates use `updateParams`.

Estimated code review effort: 2 (Simple) | ~10 minutes

Possibly related PRs

cowprotocol/docs#619: Overlapping widget tutorial updates include dimension strings and configuration guidance.
cowprotocol/docs#636: Related CowSwapWidgetParams documentation overlaps with the React and updateParams examples.

Suggested reviewers: shoom3301, limitofzero

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly summarizes the main documentation cleanup and the new widget-react documentation.
Description check	✅ Passed	The description matches the template with context and a detailed changes list covering the main updates.
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 unit tests (beta)

Create PR with unit tests
Commit unit tests in branch docs/widget-fixes

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.}

Danziger · 2026-07-14T16:55:50Z

  appCode: 'YOUR-APP-NAME', // Required: identifies your app
-  width: 600,
-  height: 640,
+  width: '600px',


I think both of them are marked as deprecated. If you want the closest non-deprecated equivalent, it would be:

rootStyle: { width: "600px", height: "640px", }

You can play around with the different options here: https://widget.cow.fi/

Danziger · 2026-07-14T16:57:28Z

-
-createCowSwapWidget(widgetContainer, { params })
-```
+- **And more**: Slippage limits, token pair constraints, custom sounds and images


If it's not already lined on this page, it might be good to add a link to https://widget.cow.fi/

Danziger · 2026-07-14T16:58:04Z

+
+const params: CowSwapWidgetParams = {
+  appCode: 'NAME-OF-YOUR-APP', // Add here the name of your app. e.g. "Pig Swap"
+  width: '600px',


Same as above.

Danziger

Approved, but while valid, these example use now deprecated params.

coderabbitai

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

docs/cow-protocol/tutorials/widget/widget.md (1)
342-342: 📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win

Fix the comma splice and add punctuation.

Use “In this case” as a new sentence and finish the paragraph with a period.
Proposed wording
-Alternatively, you can omit the provider, in this case the widget will work in standalone mode, letting users connect
+Alternatively, you can omit the provider. In this case, the widget will work in standalone mode, allowing users to connect.
🤖 Prompt for 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.

In `@docs/cow-protocol/tutorials/widget/widget.md` at line 342, Update the
sentence in the widget standalone-mode documentation to replace the comma splice
with a period before “In this case,” and end the paragraph with a period.

🤖 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.

Outside diff comments:
In `@docs/cow-protocol/tutorials/widget/widget.md`:
- Line 342: Update the sentence in the widget standalone-mode documentation to
replace the comma splice with a period before “In this case,” and end the
paragraph with a period.

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: fe602817-9639-4819-aec7-8cc1117c7a62

📥 Commits

Reviewing files that changed from the base of the PR and between 871cb3d and b9c9e5a.

📒 Files selected for processing (2)

docs/cow-protocol/integrate/widget.mdx
docs/cow-protocol/tutorials/widget/widget.md

🚧 Files skipped from review as they are similar to previous changes (1)

docs/cow-protocol/integrate/widget.mdx

Danziger

Changes look good, thanks 👌

docs: clean up widget pages and document widget-react

871cb3d

raq0x requested a review from a team as a code owner July 9, 2026 09:31

github-actions Bot added a commit that referenced this pull request Jul 9, 2026

@raq0x has signed the CLA in #642

172ab27

pretf00d approved these changes Jul 14, 2026

View reviewed changes

shoom3301 approved these changes Jul 14, 2026

View reviewed changes

Danziger reviewed Jul 14, 2026

View reviewed changes

Danziger approved these changes Jul 14, 2026

View reviewed changes

fix deprecated widget parameters

b9c9e5a

vercel Bot deployed to Preview July 15, 2026 07:36 View deployment

coderabbitai Bot reviewed Jul 15, 2026

View reviewed changes

Danziger approved these changes Jul 15, 2026

View reviewed changes

alfetopito merged commit da83fda into main Jul 15, 2026
5 checks passed

alfetopito deleted the docs/widget-fixes branch July 15, 2026 15:39

github-actions Bot locked and limited conversation to collaborators Jul 15, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

docs: clean up widget pages and document widget-react#642

docs: clean up widget pages and document widget-react#642
alfetopito merged 2 commits into
mainfrom
docs/widget-fixes

raq0x commented Jul 9, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

vercel Bot commented Jul 9, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Jul 9, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented Jul 9, 2026 •

edited

Loading

Walkthrough

Changes

Uh oh!

Danziger Jul 14, 2026 •

edited

Loading

Uh oh!

Danziger Jul 14, 2026

Uh oh!

Danziger Jul 14, 2026

Uh oh!

Danziger left a comment

Uh oh!

coderabbitai Bot left a comment

Uh oh!

Danziger left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Uh oh!

Conversation

raq0x commented Jul 9, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Changes

Summary by CodeRabbit

Uh oh!

vercel Bot commented Jul 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Jul 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai Bot commented Jul 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Uh oh!

Danziger Jul 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Danziger Jul 14, 2026

Choose a reason for hiding this comment

Uh oh!

Danziger Jul 14, 2026

Choose a reason for hiding this comment

Uh oh!

Danziger left a comment

Choose a reason for hiding this comment

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Danziger left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

raq0x commented Jul 9, 2026 •

edited by coderabbitai Bot

Loading

vercel Bot commented Jul 9, 2026 •

edited

Loading

github-actions Bot commented Jul 9, 2026 •

edited

Loading

coderabbitai Bot commented Jul 9, 2026 •

edited

Loading

Danziger Jul 14, 2026 •

edited

Loading