Add scrolling card rows, SVG icons, and a chat widget to a site
Hub Sites support three card layouts, SVG icons stored as record fields, and a direct chat widget installer in the Site settings. ## Card layouts: grid, swipeable row, and continuous scrolling Cards sections can display items in a grid, a horizontally swipeable row, or as a continuously scrolling marquee. Change the layout in the card section's **Layout and motion** settings in the site editor inspector. ### Swipeable row Cards snap to position as visitors scroll horizontally. Keyboard and touch scrolling are supported. Native scrollbars are hidden; the row remains accessible via keyboard. ### Continuous scrolling Cards animate as a loop without visitor interaction. You can configure: - **Direction** — left or right. - **Speed** — how fast the cards move. - **Card width** — the width of each card in pixels. - **Gap** — spacing between cards. - **Faded edges** — apply a gradient fade at the left and right edges. The row pauses automatically when a visitor hovers or focuses it. A **Pause / Play scrolling** button is shown so visitors can stop and restart motion at any time. Rows that fit entirely in the viewport without overflowing remain static — no cloned cards are added unnecessarily. **Reduced motion:** visitors who have enabled the reduced-motion system preference see a static layout. The scrolling animation is not played regardless of the configured speed. **In the editor:** the canvas keeps cards still while you are editing so you can interact with them normally. A note confirms that motion runs on the published site. Existing card grids are unaffected unless you change the Layout setting. ## Icons and card content Open the **Icons and card content** controls in the card section inspector to configure: - **Record icon / logo field** — for record-backed cards, choose a text, image, URL, or SVG field to use as the card's icon or logo. Leave blank to use the default icon. - **Default icon** — choose a built-in icon (book, bolt, star, code, heart, globe) to fall back to if no field value is set. - **Icon style** — plain, soft tile, or circle treatment. - **Icon size** — 16 px to 120 px. - **Content alignment** — left or centre. - **Logos only** — display only the icon or logo. Card titles are kept in the markup for accessibility but not shown visually. - **Show link arrow** — display an arrow indicator on linked cards. For manual cards, you can also upload an image or enter a URL directly as the card's icon. ## SVG icon colour The **SVG icon colour** setting controls how uploaded SVG icons are tinted on cards. It has four options: | Option | Behaviour | |---|---| | **Automatic · light / dark text** | The icon takes the page's text colour — dark on light pages, light on dark pages. This is the default and works well for single-colour SVG artwork. | | **Brand accent colour** | The icon uses the accent colour from the page's selected brand. If no brand is assigned to the page, it falls back to your workspace branding accent. Quick links to **Edit brand colours** and **Workspace branding** appear beneath the selector. | | **Custom colour** | A colour picker lets you set a fixed hex colour. That colour is used in both light and dark mode. | | **Original SVG colours** | Hub renders the SVG with its saved colours unchanged. Use this for multicolour logos. Note that black artwork may disappear on dark-themed pages. | Bitmap images (PNG, JPG, GIF, WebP) always keep their original colours regardless of this setting. Hub recolours SVG icons using a local SVG filter applied to the rendered image, so no cross-origin access to the hosted file is required. ## SVG icon / logo field You can add an **SVG icon / logo** field to any workspace object type. When a record editor uploads an SVG: - The file is sanitised to remove active content (scripts, external resources) before upload. - The public image URL is stored in the field value. - SVGs are rendered as `<img>` elements, not as inline markup, so they behave like other images. The SVG field works like the existing image field for CSV import/export and image column display. No storage rule change or data migration is required. To add an SVG field: 1. Open **Admin → Object types**. 2. Select the object type. 3. Add a field and choose **SVG icon / logo** as the type. 4. Save. In the record editor, use the upload control to upload an SVG file or paste a public URL. ## Install a chat widget from the Site Chat tab You can add a chat widget directly to a sales or customer Site without leaving the site settings. 1. Open **Sites** in your workspace. 2. Select the site. 3. Open the **Chat** tab. 4. Select the chat widget you want to install. 5. Choose a theme (auto, light, or dark). 6. Save to the site draft. 7. Publish both the widget and the site. The widget mounts on route changes and removes its iframe and theme observer when the visitor navigates away, keeping the embed clean. Site Chat configuration is included in publication and version snapshots, so it is preserved when you restore an earlier site version. ### Custom domains and allowed origins If your chat widget restricts allowed domains, add the site's live hostname in the widget's **Install** tab under the **Allowed domains** or **Allowed origins** settings. This applies to both Hub-hosted and custom-domain sites. ### Remove the chat widget To remove a widget, open the **Chat** tab, select **No chat widget** (or disable **Show chat**), and publish the site. ## Upload controls Image URL and file upload controls across Hub — including the image inspector, inline cover, attachments, branding settings, and the form theme panel — now share a single compact boundary. The URL input and upload button sit in one bordered row, keeping the interface consistent at 32 px height throughout.