--- title: "Airdate Speakers: setup guide" description: Airdate Speakers is a free HubSpot module for the speakers of an event or a webinar. --- [Skip to content](https://www.airdatethemes.com/airdate-speakers-docs#main-content) [![Northwind](https://www.airdatethemes.com/hs-fs/hubfs/airdate-demo/northwind-logo.png?width=600&height=192&name=northwind-logo.png "Northwind")](https://149405016.hs-sites-eu1.com/en/growth-sessions?hsLang=en) - [Sessions](https://www.airdatethemes.com/en/growth-sessions#sessions) - [Replays](https://www.airdatethemes.com/en/growth-sessions#replays) - [Speakers](https://www.airdatethemes.com/en/growth-sessions#speakers) - [FAQ](https://www.airdatethemes.com/en/growth-sessions#faq) - [Sessions](https://www.airdatethemes.com/en/growth-sessions#sessions) - [Replays](https://www.airdatethemes.com/en/growth-sessions#replays) - [Speakers](https://www.airdatethemes.com/en/growth-sessions#speakers) - [FAQ](https://www.airdatethemes.com/en/growth-sessions#faq) [Save my seat](https://149405016.hs-sites-eu1.com/en/growth-sessions?hsLang=en#register) Documentation # Airdate Speakers: setup guide Airdate Speakers is a free HubSpot module for the speakers of an event or a webinar. Each speaker gets a card with a photo (or their initials), a role, a company, a short bio, a few links and their sessions. Each session time shows in the visitor's own time zone and in the language of the page, marked "Live now" while it runs and "Ended" after. It works on every HubSpot plan. No app to install, no account to create, no outside script. **Important:** the module shows the speakers you type in it. It is not synced with HubSpot marketing events or your webinar tool, and it has no page per speaker. For the programme of a whole day, hour by hour, see "Limits" below. ## 1. Install and add the module 1. Install Airdate Speakers in your HubSpot portal. 2. Open a website page, landing page or blog post in the editor. 3. In the **Add** panel, search for **Airdate Speakers** and drag it where you want the speakers. 4. Give each row of **Speakers** a **Full name**, then a role, a photo, a bio and sessions if you like, and publish. A new module comes with three sample speakers, each with one session without a time. Replace them with your own. ## 2. Heading and introduction - **Heading** and **Heading level** (H2, H3 or H4): the title above the speakers, "Speakers" by default. Leave it empty to show none. Pick the level that fits the outline of your page. The name of each speaker is one level below. - **Introduction**: one line under the heading, such as "All times are in your time zone." Leave it empty to show none. ## 3. Speakers One row per speaker, up to 60. They show in the order you type them, except the featured ones, which come first. - **Full name**: required. A row without a name is not shown. - **Role** and **Company or organisation**: shown under the name, separated by a dot. Either one can stay empty. - **Photo**: a square photo works best, at least 240 × 240 px. It is cropped to fill the circle or square, without being stretched. Without a photo, the module draws the speaker's initials on a dark background: the first letter of the first and the last word of the name ("Ana María Costa" gives "AC"). - **Short bio**: two or three sentences, as plain text. How it shows is set once for all speakers (see below). - **Featured (keynote)**: the speaker gets a full-width card with a larger photo, before the others. Several speakers can be featured; they keep the order you typed. - **Links**: up to 4 per speaker, such as "Website" or "LinkedIn". Each one needs a **Link text** and a **Link**, or it is not shown. They are plain text links, without logos. An e-mail address becomes a `mailto:` link. The "open in a new tab" option is followed. - **Sessions**: up to 8 per speaker (see the next part). Below the list: - **Bio**: **Behind a "Read bio" button** (by default), **Always shown**, or **Hidden**. - **Hide ended sessions**: off by default, so ended sessions stay, marked "Ended". On, they disappear at their end time. ## 4. Sessions and time zones Each speaker can have up to 8 sessions, listed under a "Sessions" title on their card. - **Session title**: required. A session without a title is not shown. - **Start**: the date and time of the session. Leave it empty to list the session without a time. - **Duration (minutes)**: 45 by default, from 1 to 1440. It sets when "Live now" ends. - **Session link (optional)**: the session page, the room or the replay. With a link, the session title is the link. Each time is written in the language of the page and the visitor's time zone, with the name of the zone, such as "Wed, Mar 12, 12:00 PM EDT" for a visitor in New York, or "mer. 12 mars, 17:00 UTC+1" on a French page seen from Paris. You enter the start once; every visitor sees it in their own time. Within each card, sessions are sorted by start, earliest first. Sessions without a time come after, in the order you typed them. ## 5. "Live now" and "Ended" - From the start of a session to the end of its duration, a **Live now** mark shows next to its time, in the accent color. - After its end, the session shows **Ended** and its title turns to the secondary text color. With **Hide ended sessions** on, it disappears instead. A speaker whose sessions have all ended keeps their card, without the "Sessions" title. - The marks change by themselves at the start and end times, even on a page the visitor keeps open. No need to republish: the page can stay in HubSpot's cache. - A session without a time never gets a mark. The marks use the clock of the visitor's device. ## 6. Texts Every word the module adds is a field, in the **Texts** group. Write them in your page's language: - Sessions title ("Sessions"); - Read bio button ("Read bio"); - Live mark ("Live now") and Ended mark ("Ended"); - Links, read by screen readers ("Links"): they hear "Links, Ana Costa"; - New tab, read by screen readers ("(opens in a new tab)"); - The editor note shown when there is no speaker, in the editor only. Session times follow the language of the page. ## 7. Appearance and layouts In the **Style** tab: accent (link underlines, the "Live now" mark, the Read bio arrow, the focus outline; it follows your theme's primary color when the theme has one), text on the accent (the words of the "Live now" mark), text, secondary text (roles, times, the "Sessions" title), card background, card border, initials background (keep it dark: the initials are white), and corner radius (0 to 24 px). The module uses your theme's font. With a light accent, set **Text on the accent** to a dark color so the "Live now" mark stays readable. Links keep the text color and are underlined in the accent, so they stay readable either way. - **Layout**: **Cards** (by default), in a grid, or **Rows**, one speaker per line: the photo and name on the left, the bio, sessions and links beside them. In a narrow column or on a phone, the two parts go one under the other, whatever the screen width. - **Columns (cards)**: 2, 3 (by default) or 4. It is the most cards per line: a narrow column gets fewer by itself, down to one on a phone. A featured speaker always takes the whole line. - **Photo shape**: circle (by default), rounded square or square. It applies to photos and initials alike. In a narrow card, the name and role go under the photo instead of beside it, so long names are never cut in the middle of a word. ## How the module works 1. The page is sent with every speaker, their bio, links and sessions, featured speakers first. Search engines and visitors without JavaScript read them all. 2. In the visitor's browser, a small script draws the initials of speakers without a photo, writes each session time in the language of the page and the visitor's time zone, and sorts each speaker's sessions by time. 3. It then marks each session "Live now" or "Ended" (or hides it), and checks again at the next start or end time while the page is open. The script only touches its own block. Several Airdate Speakers modules can share a page; each has its own speakers and settings. ## In the editor - With no speaker (or none with a name), a yellow note says so in the editor. Visitors never see it: on the live page, the module shows nothing at all. ## Without JavaScript Every speaker shows, with their role, bio, links and sessions. Session times are printed by HubSpot on the server in UTC, and say so ("Mar 12, 2031, 4:00:00 PM UTC"), not converted to the visitor's time zone; sessions are already in time order. There is no "Live now" or "Ended" mark (rather than a wrong one), ended sessions are not hidden, and the initials are not drawn: a speaker without a photo gets a plain colored shape. The "Read bio" button still works, as it is a native browser element. ## Accessibility - The speakers are a list. Each name is a heading, one level below the module heading. - Photos and initials are decorative: screen readers skip them and read the name, which follows. The photo's alt text is not used. - "Read bio" is a native disclosure button (`
`), at least 44 px high, that works with the keyboard. Screen readers hear the speaker's name with it: "Read bio, Tom Reyes". - Each list of sessions is named "Sessions" and the speaker's name; each list of links "Links" and the speaker's name. - "Live now" and "Ended" are words, not only a color. Times are in `