Skip to main content

Add a custom page to the event app

C
Written by Customer Success

A custom page shows a web page inside the event app as its own page, with a name and an icon in the menu. You choose who can see it. With a Dynamic URL, Brella fills each attendee's details into the address, so every attendee gets a personal link.

Before you start

  • You need to be an event admin or an organization admin.

  • The web app embeds the page. If the website blocks embedding, for example with the X-Frame-Options header, turn on Open in a new tab for the page. The mobile app is not affected.

  • Brella saves http:// addresses as https://. The website must work over https://.

  • Custom pages are different from event info pages. Event info pages are listed under Event info on the home page and are visible to everyone. See Create event info pages.

Where to find it

Custom content > Custom pages in the admin panel.

Create a custom page

  1. Open Custom content > Custom pages and select Create new.

  2. Select Continue.

  3. In Compatibility test, under Select the type of content you wish to embed, choose Embed a webpage or Dynamic URL. If Brella has connected your event to Braindate, a Braindate option is also listed.

  4. Enter the address in Insert the URL you wish to embed and select Continue.

  5. In Insert Brella code, do one of these:

    • Add the script shown to the end of your website's pages, select Check for Brella code, then select Continue. Continue becomes available when the check finds the script.

    • Select Skip, then Skip again in the dialog "Skipping may result content misbehavior".

  6. In Preview, use the desktop and mobile icons to check how the page looks, then select Continue.

  7. Enter the Page name, choose a Page icon and enter the Page link.

  8. Choose the Status, turn Open in a new tab on or off, and choose Who can see this page?.

  9. Select Create page.

The mobile app and the web app don't use the Brella code. It has no effect on how attendees see the page.

Insert Brella code step with the script, Copy to clipboard, Check for Brella code, Skip and disabled Continue

Compatibility test step with the content type list open (Embed a webpage, Dynamic URL), the URL field and the Make your URL compatible for embedding box

Details step with Page name, Page icon, Page link, Status, Open in a new tab, Who can see this page? and the tab preview

New pages are added after the event's other pages. To rename a page or change its position, use Customization > Tabs, where it is listed as Custom page. See Rename and reorder the app's tabs.

Page settings

Setting

What it does

Default

Page name

The name in the app menu and at the top of the page. Up to 14 characters. Must differ from the names of the event's other pages.

Empty (required)

Page icon

The icon next to the name in the menu.

Empty (required)

Page link

A short identifier for the page. Featured tiles use it to link to the page. Up to 25 characters: lowercase letters, numbers and hyphens, not starting or ending with a hyphen. Must differ from the event's other pages.

Empty (required)

Status

Published shows the page to attendees. Draft hides it.

Published

Open in a new tab

In the web app, opens the website in a new browser tab instead of embedding it. The mobile app always shows the page in the app.

Off

Who can see this page?

Anyone, or Specific lists and then the lists in Select lists.

Anyone

The admin panel shows the page link after the event's web address, but that address doesn't open the page. To link to the page, use a featured tile or the deep link /pages/<page id>.

Personalize the address with a Dynamic URL

A Dynamic URL page contains tags that Brella replaces with the attendee's data each time an attendee opens the page.

Ask the destination website's owner which URL parameters it accepts and what values it needs. Their site must already use those parameters to show the right content. Adding a tag in Brella does not configure the other website.

  1. In Compatibility test, choose Dynamic URL.

  2. Under Available merge tags, select a tag. The admin panel copies it.

  3. Paste the tag into the address in Insert the URL you wish to embed. Repeat for each tag.

  4. Continue as for any other custom page.

  5. Test the published page with a sample attendee who has the required field values. Check that the destination receives the expected values and shows the intended content.

For example, https://example.com/welcome?user={{registrant_id}}&name={{invite_first_name | url_encode}} opens https://example.com/welcome?user=12345&name=Jane for Jane, registrant 12345.

Dynamic URL settings with a valid example URL, the invite and attendee tag buttons and the encoding note

Warning: The tags send attendee data to the website in the address. Use only websites you trust and are allowed to share this data with.

Tags

Each tag holds the same value as a column of the registrants export.

Tag

Value

Export column

{{registrant_id}}

The registrant's ID. Not in the admin panel's list; type it yourself.

id

{{invite_id}}

The registrant's invite ID from before Brella moved to registrants. For registrants without one, the registrant ID.

old_invite_id

{{attendee_id}}

The registrant's attendee ID from before Brella moved to registrants. For registrants without one, the registrant ID.

old_attendee_id

{{invite_first_name}}, {{invite_last_name}}, {{invite_company}}, {{invite_job_title}}

The details you registered for the person in the admin panel, a CSV import or the API.

registered_first_name, registered_last_name, registered_company, registered_job_title

{{attendee_first_name}}, {{attendee_last_name}}, {{attendee_company}}, {{attendee_job_title}}

The details on the attendee's profile. An empty profile field falls back to the registered value.

joined_user_first_name, joined_user_last_name, joined_user_company_name, joined_user_job_title

{{invite_join_token}}

The registrant's personal join code.

join_token

{{invite_external_id}}

The registrant's external ID.

registered_id

{{invite_qr_string}}

The external QR code value stored on the registrant. Empty if none is set.

external_qr_string

{{invite_ticket_type_list_id}}

The ID of the registrant's ticket type list.

ticket_type_list_id

{{invite_custom_<field key>}}

The registrant's value for a registrant custom field. The list shows one tag per field. For a field with several values, the first value.

—

A tag with no value for the attendee is replaced with nothing.

Encoding

  • Name, company, job title and QR tags are copied with | url_encode. This keeps the address valid when a value contains spaces, accented letters or symbols such as &.

  • Custom field tags are copied without it. Add it yourself when the value is plain text, for example {{invite_custom_full_name | url_encode}}. Leave it out when the value is a web address or query string.

Edit, hide or delete a page

  • Edit: select Edit in the page's row, change the details and select Save page. To change the address, select Change URL.

  • Hide: turn off the page's Published switch. The change is saved at once.

  • Delete: select Delete, then Delete in "Do you want to delete this page?". The page can't be restored.

What attendees see

  • Mobile app, and the web app on windows narrower than 768 px: a tile in the Menu tab.

  • Web app on wider windows: an item in the left rail.

  • Only attendees in the chosen lists see the page. Draft pages are hidden from everyone.

  • The page loads inside the app.

  • In the mobile app, the page has back, reload and forward buttons. Links on the page to PDF, Word, Excel, PowerPoint, CSV or ZIP files download the file and open the share sheet.

  • With Open in a new tab, the web app opens the website in a new browser tab. If the browser blocks it, the page shows "This page opens in a new tab" with an Open page button.

  • If natural language search is on, custom pages also appear as quick links on the Discovery page.

  • Featured tiles can link to a custom page. The deep link /pages/<page id> opens it; the page ID is the number in the admin panel address when you edit the page. See Deep link reference.

Menu tab with a custom page tile showing its name and icon

Limits

  • Page name: up to 14 characters. Page link: up to 25 characters.

  • Each address can be used by one custom page per event.

  • http:// addresses are saved as https://.

  • A Dynamic URL must produce a valid https:// address after the tags are filled in.

Troubleshooting

The page is blank in the web app
The website blocks embedding. Turn on Open in a new tab, or ask the website owner to allow embedding.

"There is a custom page with this URL already."
Another custom page in the event uses the same address. Use a different address or edit the existing page.

"Something went wrong while trying to create the custom page, please refresh your browser and try again!"
One cause is a Page name or Page link already used by another page in the event. This includes built-in pages, for example the links discovery and spaces, and sponsor pages. Choose another name or link.

A Dynamic URL page opens with {{ in the address
Brella couldn't build a valid address, for example because a custom field value contains spaces and its tag has no | url_encode. Add | url_encode inside the tag's braces.

A tag is empty on the page
The attendee has no value for that field. Check the registrant in People > Registrants.

Related articles

Related Articles
Did this answer your question?