Tally.so Integration

Relevant source files

The following files were used as context for generating this wiki page:

• src/pages/[...slug].tsx
• src/pages/dynamic/[...slug].tsx
• src/pages/_app.tsx
• contentlayer.config.ts
• package.json

The railways-docs project integrates with Tally.so to embed forms directly into documentation pages. This functionality is primarily facilitated by a custom <TallyButton /> React component, which is made available to all Markdown (MDX) documents. This allows content creators to seamlessly insert interactive elements like feedback forms, surveys, or contact forms within the documentation content.

The integration leverages the MDX processing capabilities of Contentlayer and Next.js to inject the React component into the rendering pipeline, making it usable with simple JSX-like syntax in .md files.

Component Registration and Availability

The core of the integration lies in making the TallyButton component available to the MDX renderer. This is configured for both statically generated and dynamically rendered documentation pages, ensuring consistent behavior across the site.

The following diagram illustrates how the TallyButton component is injected into the MDX rendering flow.

Static Page Integration

For statically generated pages, which constitute the bulk of the documentation, the TallyButton is registered within src/pages/[...slug].tsx. The component is imported and added to a components map that is then passed to the MDXContent component.

// src/pages/[...slug].tsx:17-26
import { TallyButton } from "@/components/TallyButton";

const components: Record<string, React.ElementType> = {
  // ... other components
  TallyButton,
};

export default function PostPage({ page }) {
  const MDXContent = useMDXComponent(page.body.code);
  // ...
  return (
    <Layout ...>
      <MDXContent components={componentsWithProps} />
    </Layout>
  );
}

This setup ensures that any time a .md file is rendered through this layout, it will recognize and correctly render the <TallyButton /> tag.

Sources: src/pages/[...slug].tsx:17,26,48

Dynamic Page Integration

A similar pattern is used for dynamically rendered pages in src/pages/dynamic/[...slug].tsx. This ensures that features requiring server-side logic or dynamic routing can also include Tally.so forms.

// src/pages/dynamic/[...slug].tsx:18-27
import { TallyButton } from "@/components/TallyButton";

const components: Record<string, React.ElementType> = {
  // ... other components
  TallyButton,
};

export default function PostPage({ page }) {
  const MDXContent = useMDXComponent(page.body.code);
  // ...
  return (
    <Layout ...>
      <MDXContent components={componentsWithProps} />
    </Layout>
  );
}

The consistency between static and dynamic page handling simplifies the authoring experience for documentation writers.

Sources: src/pages/dynamic/[...slug].tsx:18,27,45

Rendering Sequence

The following sequence diagram details the end-to-end process from a user requesting a documentation page to the TallyButton being rendered in the browser.

This flow demonstrates how the build process and client-side rendering work together to deliver the final interactive page.

Sources: src/pages/[...slug].tsx:51-62, contentlayer.config.ts:3-25

Usage in Markdown

With the component registered, authors can embed a Tally button directly into any .md file using standard JSX syntax.

While the specific properties (props) for the TallyButton component are not detailed in the available source files, a typical implementation would likely accept parameters to customize the button and the form it triggers. The following table outlines inferred properties based on common usage patterns for such a component.

Prop Name	Type	Description
formId	string	(Inferred) The unique identifier for the Tally.so form to be displayed.
buttonText	string	(Inferred) The text to display on the button.
layout	'modal' | 'popup'	(Inferred) Determines how the form is displayed (e.g., in a modal overlay or a new browser window).

Note: The properties above are inferred, as the src/components/TallyButton.tsx source file was not available for direct analysis.

An example of how it might be used in a Markdown file:

### We'd love your feedback!

Was this guide helpful? Let us know what you think.

<TallyButton formId="wAvoZ1" buttonText="Give Feedback" />

Summary

The Tally.so integration in railways-docs is a powerful feature that enhances static documentation with interactive forms. By registering the TallyButton as a globally available MDX component, the system provides a simple and declarative way for content authors to engage with readers and collect valuable feedback directly within the context of the documentation. This architecture effectively bridges the gap between the Next.js-based frontend and the external Tally.so form service.

Sources: src/pages/[...slug].tsx, src/pages/dynamic/[...slug].tsx