How to Edit Dial-in Registration Page

Editing the Dial-in Page

You can access the page editor by clicking “Edit Dial-in Page.”

The new builder should look something like this. In the new editor, you’ll find the available page components on the left side, and the settings for the selected component on the right.

×

The CSS editor can always be found under the page settings or from the bottom bar by clicking the drag icon. (You can access the page settings by clicking on the page.)

×

You can switch between different event stages from under Change Preview State. Next to it, you can also see the language to which the page text defaults. You can change the page language here if you have created pages in multiple languages.

×

From the settings wheel, you can create new language versions, or delete the pages for the selected language or all languages.

Next to the settings wheel, Publish saves the page, and View opens the page.

In the new editor, you can add new components to the page by dragging them from the left side into the page area in the center.

×

Clicking a component activates it and displays its settings on the right side

×

Text Input: Dial-in texts

• In the modal instructions, you can edit keywords: {eventTitle}, {conferenceId}, and {userId}.
• These placeholders will be replaced with the corresponding values per event.
• Remember to add # after {userId} and {conferenceId}.

Theme Colors

The site uses themes, meaning that each page defines which colors its components will use.

Background

• Purpose: Main page/app background color.
• Usage:
  • Page backgrounds, input fields, button backgrounds
  • Tooltip backgrounds (with foreground text)
  • Audio player controls background
  • Chat message backgrounds

Foreground

• Purpose: Primary text color throughout the site.
• Usage:
  • Body text, headings, icons
  • Button text on background buttons
  • Form input text
  • Navigation text

Card

• Purpose: Surface/container backgrounds elevated from background.
• Usage:
  • Header, footer, chat area, registration forms, modals, popovers, dropdowns
  • Speaker cards, schedule items, downloads panel, participation details
  • Most UI component backgrounds (buttons, inputs when not transparent)

Card Foreground

• Purpose: Primary text color on card surfaces (overrides foreground on cards).
• Usage:
  • Text on cards: footer, chat messages, schedule items, speaker cards, countdown, dial-in panel
  • Registration form labels, inputs, and choices
  • Falls back to foreground when not set

Header Background

• Purpose: Background color for the site header bar (overrides card for the header only).
• Usage:
  • Header / top navigation bar background
  • Falls back to card when not set

Header Foreground

• Purpose: Text and icon color inside the header.
• Usage:
  • Header navigation text and icons
  • Language selector
  • “Recognized” registrant bar, and sign-in / registration text shown in the header area
  • Falls back to foreground when not set

Card Foreground

• Purpose: Primary text color on card surfaces (overrides foreground on cards).
• Usage:
  • Text on cards: footer, chat messages, schedule items, speaker cards, countdown, dial-in panel
  • Registration form labels, inputs, and choices
  • Falls back to foreground when not set

Header Background

• Purpose: Background color for the site header bar (overrides card for the header only).
• Usage:
  • Header / top navigation bar background
  • Falls back to card when not set

Header Foreground

• Purpose: Text and icon color inside the header.
• Usage:
  • Header navigation text and icons
  • Language selector
  • “Recognized” registrant bar, and sign-in / registration text shown in the header area
  • Falls back to foreground when not set

Primary

• Purpose: Brand/accent color for interactive elements.
• Usage:
  • Active/hover/focus states
  • Links, selected items, chapter indicators, raised-hand status
  • Search results highlighting
  • Scrollbar thumbs
  • Submit buttons (text on foreground background)
  • Active chat/transcript indicators
  • Social media button hover borders

Muted

• Purpose: Subdued text and secondary information.
• Usage:
  • Timestamps, placeholders, secondary labels, disabled states
  • Inactive icon colors, audio visualizer bars
  • Secondary button text
  • Dropdown chevron icons

Destructive

• Purpose: Error, warning, or danger states.
• Usage: Delete buttons, error messages, tooltips
• Note: Use sparingly for critical actions.

Border

• Purpose: Borders for all UI elements.
• Usage:
  • Component outlines, dividers, separators
  • Focus states (in combination with primary for active borders)
  • Cards, buttons, inputs, modals, dropdowns, sections

Border Radius

• Purpose: Defines the corner rounding for components.