Skip to main content

Webround Frontend Custom React Code

Custom components are standard React compiled with Vite, mounted as Web Components inside the Webround runtime.

For anything not covered here: https://docs.webround.com

Component structure​

Every component receives a wr prop with the full site context. Alway use a default export.

const MyComponent = ({ wr }: { wr: Wr }) => {
  return <div>Hello</div>;
};
export default MyComponent;

File structure​

  • Root: src/
  • Pages: src/pages/MyPage.tsx
  • Components: src/components/Hero.tsx
  • Global styles: src/style.css
  • Import between files with relative paths: import Hero from "./Hero"

It's not mandatory to use this structure, but it's recommended.

Internal navigation​

<a
  href={wr.utils.generateHref("/path")}
  onClick={(e) => {
    e.preventDefault();
    wr.utils.navigate(wr.utils.generateHref("/path"));
  }}
>
  Link
</a>
const host = document.querySelector('wr-src-{pagename}-{componentname}') as HTMLElement & { shadowRoot: ShadowRoot };
const target = host?.shadowRoot?.querySelector('#target-id') as HTMLElement | null;
const header = document.querySelector('wr-src-siteheader') as HTMLElement | null;
const headerHeight = header?.getBoundingClientRect().height ?? 0;
if (!target) return;
const top = target.getBoundingClientRect().top + window.scrollY - headerHeight;
window.scrollTo({ top, behavior: 'smooth' });

In the example, we suppose files are organized with the default structure: src/page/Component.tsx, while the header is placed under src/SiteHeader.tsx file.

CSS​

  • Use Tailwind v4
  • The site's CSS variables (--font-main, --brand-blue, etc.) are accessible inside the shadow DOM, but need to be defined in customStyle.css through the left sidebar, under the "custom styles" entry
  • The site's CSS classes do not cascade into the shadow DOM
  • If you need global utility classes, define them in src/style.css mapping them to CSS variables, then import the file in each component
  • Do not import customStyle.css

Editor safety​

When the code runs in the editor, the wr.inEditor boolean value is set to true. Avoid side effects inside the editor (fetch calls, analytics, scroll listeners, timers):

if (wr.inEditor) return;

Forms with Altcha​

const proof = await wr.utils.getAltchaChallenge();
const ok = await wr.utils.submitForm({ name, email, message }, [], proof);

SDK types (wr prop)​

Download the full wr type definitions: https://docs.webround.com/wr.d.ts

Tips​

After writing custom React code, always save and compile. The compile action starts the build process, so that the bundled JS can be loaded in the web page. Always wait for compilation success and specify the path in the injection point you want to display the React code. If a new build happens, page reload is mandatory to display updated, non-stale, web-components.