> For the complete documentation index, see [llms.txt](https://docs.beefree.io/beefree-sdk/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.beefree.io/beefree-sdk/~/changes/3EjxmC5rAYEIQ0JKR16k/rows/custom-rows/loading-custom-rows-from-your-ui.md).

# Loading Custom Rows from your UI

## Overview <a href="#overview" id="overview"></a>

Custom Rows are a powerful way to provide “ready-to-go” content directly into the builder. Think products, blog articles, events, coupons. And don’t forget that Saved Rows your customers might have will be loaded as Custom Rows the next time they load the builder.

All this content is crucial to make the most out of the Beefree SDK experience, and that’s why you can add UI elements in your app’s interface to:

* jump right to a Custom Rows category, without the need for the user to go into the *Rows* tab, click on the dropdown and select the category;
* provide additional information on the available rows, either through a tooltip or by showing a Content dialog with all the information and the links to the rows.

With this feature, you will reduce the friction needed to discover and access the builder’s Custom Rows. To do so, you’ll use the `loadRows` event, which will trigger the *Custom Rows content dialog*.<br>

### How it works <a href="#how-it-works" id="how-it-works"></a>

Here’s an example of our Beefree product, which integrates Beefree SDK, taking advantage of this method to load custom rows from its UI.

The toolbar in the application contains explicit call-to-action text links to load footers, which correspond to different categories of Custom Rows in the application.

<figure><img src="https://806400411-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8c7XIQHfAtM23Dp3ozIC%2Fuploads%2FqREnptqd4WoUiEm40b0y%2FCTAs-for-rows.jpg?alt=media&amp;token=2fe13193-3dff-4e6f-9057-56e1ba603ea9" alt=""><figcaption></figcaption></figure>

When users click on “Mailchimp Footers”, the Custom Rows Content Dialog is triggered, meaning that the builder opens a communication channel with your application. In this case, no additional UI will be displayed, as the host application provides the URL to the rows associated with that call-to-action. This way, the Rows tab will be immediately selected, with the “Mailchimp Footers” category already selected:

<figure><img src="https://806400411-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8c7XIQHfAtM23Dp3ozIC%2Fuploads%2F7qGTMCYBM4VQePj342JK%2F2Showing-custom-rows.png?alt=media&amp;token=83142623-197a-45af-9f27-99d677d25545" alt=""><figcaption></figcaption></figure>

But what if you wanted users to select the email footers they need from a large catalog of pre-built content? In that scenario, you could have a more generic “Load footers” call-to-action in the toolbar.

<figure><img src="https://806400411-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8c7XIQHfAtM23Dp3ozIC%2Fuploads%2FBBuBYzC8dIq9xZCePNBJ%2F3Load-footers.jpeg?alt=media&amp;token=a4ffb11e-5f6b-4892-9ded-03c79056037d" alt=""><figcaption></figcaption></figure>

Clicking on “Load Footers” will once again trigger the *Custom Rows content dialog*, but this time the application could provide a dialog window where users can browse or search through available footers, and get some additional context on them. Here is a visual example of how it might look like, but as with all content dialogs you have complete freedom on what to show:

<figure><img src="https://806400411-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8c7XIQHfAtM23Dp3ozIC%2Fuploads%2F2AY9Y71IYu8gmyD6As4e%2F4Footers-content-dialog_s.jpeg?alt=media&amp;token=23cfe433-bb9c-4dd1-887b-098efbd6dc8e" alt=""><figcaption></figcaption></figure>

When users click on MailChimp, the modal window fades off, the builder switches to the “Rows” tab, and the MailChimp Footers are shown, ready to be dragged into the message.

### How to integrate it <a href="#how-to-integrate-it" id="how-to-integrate-it"></a>

You can trigger the *Custom Rows content dialog* via the `loadRows` instance event.

```javascript

bee.loadRows()

```

Once the Content Dialog is triggered, you have two options, as explained in the How it works section:

* Interact with the end user, as described in our [Content Dialog](/beefree-sdk/~/changes/3EjxmC5rAYEIQ0JKR16k/other-customizations/advanced-options/content-dialog.md) documentation, and eventually return a URL of custom rows.
* Immediately return the rows URL, without displaying the Content Dialog. This is useful if you have a menu and already know which rows to load based on the interaction by the end user with you application’s UI.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.beefree.io/beefree-sdk/~/changes/3EjxmC5rAYEIQ0JKR16k/rows/custom-rows/loading-custom-rows-from-your-ui.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.