Add website widgets
Copy a card, badge, footer link, banner or captions embed into your site so visitors can find your live captions.
Website widgets put your listener link on your own site. You copy a piece of HTML from your dashboard and paste it into a page.
Add a widget
- Open Sharing Library in your dashboard and select the Website widgets filter.
- Pick a widget to preview it.
- Choose a language in Opens in.
- Click Copy code.
- Paste the code into your site.
Choose a widget
| Widget | What it shows | Where to use it |
|---|---|---|
| Translation card | Your organization's name and logo, a short explanation and a button | A home page or a plan-your-visit page |
| Translation badge | A small link | A header, a sidebar or next to your video stream |
| Footer link | A slim line of text | Your site footer |
| Captions banner | A strip of text across the page | The top of your site |
| Captions embed | The captions page, inside your site | Next to your video stream, so people can read without leaving the page |
The card, badge, footer link and banner open captions in a new tab. An icon next to the text marks this. The card and footer link also carry a small "Powered by LiveSunday" link.
Translation card
The card takes your organization's name and logo from Organization settings. If your organization has no logo, the card shows the name only.
Pasted code keeps the name it had when you copied it. After you change your name, copy the code again and replace it on your site.
The logo updates on its own. After you upload a new one, the card can take up to a day to show it, and it may show no logo until then. If your organization had no logo when you copied the code, copy it again after you add one.
Footer link
The footer link has no background or text color of its own. It takes its colors from the footer it sits in, so it works on dark and light sites.
Captions banner
Paste the banner as near the top of the page as your site builder allows. If you can edit the page's HTML, put it right after the opening <body> tag.
Captions embed
The embed shows the captions page inside your site, 600px tall. It shows a not-streaming message until a session is live, then captions appear on their own.
Choose the language
Opens in sets the language of the link and the language of the widget text.
With your speaker language selected, the widget uses your plain link, such as livesunday.ai/j/your-handle.
With another language selected, the link opens that language, such as livesunday.ai/j/your-handle/lang/es.
Opens in lists your speaker language and your translation languages. To use another language, add it to your translation languages first. If you remove a language later, widgets that open it send listeners to the speaker-language page, with no error.
Widget text comes in English, Spanish, French, Portuguese and Korean. For other languages the text stays in English.
Links in pasted code use your handle, so changing your handle breaks them. Copy the code again if you change it.
Paste the code
Most site builders have a custom HTML or code block. WordPress has a Custom HTML block, Squarespace has a Code block and Wix has Embed HTML. Menus change, so check your builder's help pages if you can't find yours.
Add the block where you want the widget, paste the code and publish the page.
React or Next.js
You can't paste the HTML straight into JSX, because style="..." strings and attributes such as stroke-width aren't valid JSX. Wrap the code in dangerouslySetInnerHTML instead:
<div dangerouslySetInnerHTML={{ __html: `...snippet...` }} />Replace ...snippet... with the code you copied.
Organization settings
Change your organization's name, logo, handle and website, or leave or delete the organization.
Referral program
Share your referral link, and you and the new account each get $20 when they pay their first invoice.
Still stuck?
Chat with us from the bubble in the corner or send us a message. Most questions get an answer within a day.