Kanorio currently offers 40 modules in the "Modules" panel of the editor, covering content presentation, online stores, and 17 mainstream third-party platform embeds.
| Module Name | Purpose | Layout & Feature Settings |
|---|---|---|
| Hero | The top section of your page to convey your core message and primary call to action. | 3 layouts (Banner + Card, Split, Full-width); adjustable banner height (Compact/Standard/Tall), logo size, toggleable brand URLs, key highlights, and small data points. |
| Full-width Image | Display high-quality photos across the entire screen with text and buttons overlaid. | 9-grid text positioning and text background toggles; can be converted to/from Hero or Split Layout modules without data loss. |
| Image Gallery | Showcase multiple works, space photos, or event highlights in a grid or masonry layout. | Select "Original" for Masonry, or 1:1 / 4:3 / 3:4 / 16:9 for uniform grids; supports Lightbox and individual image width control. |
| Image Carousel | Display multiple photos in a horizontal slider to save vertical space. | Supports autoplay, image sizing, and height mode switching. |
| Module Name | Purpose | Layout & Feature Settings |
|---|---|---|
| Split Layout | Pair an image with a detailed description, perfect for brand stories, services, or founder intros. | Swap left/right alignment, adjust image size and 5 aspect ratios; supports adding "+ Key Highlights" and "+ Small Data". |
| Card Gallery | The most versatile grid for services, case studies, and feature highlights. | 3 grids (Uniform, Bento, List) × 4 card styles (Shadow, Border, Subtle Background, Minimalist); each card supports photos/icons, badges, key highlights, individual buttons, and 3/5-line text truncation. |
| Card Carousel | Display multiple cards in a horizontal slider. | Supports 4 card styles, badges, key highlights, and buttons; convertible to/from Card Gallery modules. |
| Call to Action | Use a bold statement and a button to drive conversions between sections or at the footer. | Supports center or left alignment, sub-headlines, key highlights, and small data points. |
| Multimedia | Upload and play videos, audio, online PDFs, or provide file download cards (Word/Excel/PPT/EPUB/ZIP). | Built-in playback speed and picture-in-picture player, PDF reader (see Video, Audio, PDF & Files); adjustable display width (Compact/Standard/Wide) for single items. |
| Module Name | Purpose | Layout & Feature Settings |
|---|---|---|
| Text Card Gallery | List service features, advantages, pricing, or steps clearly without photos. | Shares the same 3 grids and 4 card styles as the Card Gallery; each card supports icons, badges, key highlights, and individual buttons. |
| Long-form Text | Ideal for long explanations, terms, or tutorials requiring structured formatting. | Supports two-level heading structures and auto-generated side/top Table of Contents (TOC). |
| Blog Posts | Automatically fetch and display published Blog posts. | 4 layouts (Uniform grid, Featured post, Horizontal list, Text-only announcement); filter by category/tag and add a "View All" button at the bottom. |
| Module Name | Purpose | Layout & Feature Settings |
|---|---|---|
| FAQ | Organize common customer questions to reduce repetitive support inquiries. | • 3 layouts: Single-column accordion (default), two-column accordion (desktop), full-expand grid |
| Pricing | Compare service plans, prices, and inclusions side-by-side (info-only, no checkout). | • Supports featured plan badges, checkmark lists, individual plan buttons, and module-level buttons |
| Key Metrics | Showcase achievements with large numbers (e.g., "500+ Brands Served", "99.8% Rating"). | • 2 styles: Individual card grid (default), minimalist data strip with vertical dividers |
| Milestones | Present brand history, event timelines, or 4-step service processes. | • 3 layouts: Vertical timeline (default), horizontal steps (desktop, 1 → 2 → 3), alternating center-axis |
| Countdown | Display real-time countdowns for event launches, early-bird offers, or registration deadlines. | • Supports custom end times and post-expiry text |
| Delivery Info | Display delivery distance tiers, shipping fees, and free shipping thresholds. | • 2 layouts: Distance radar + list (default), side-by-side tier cards without radar |
| Media Links | Organize lists of external media coverage, partners, or recommended articles. | • Supports large image or thumbnail list views |
These four modules pull data you have created in the backend under "Store › Products" or "Marketing › Online Forms":
| Module Name | Purpose | Layout & Feature Settings |
|---|---|---|
| Product Catalog | List multiple products for browsing, filtering, and adding to cart or quick checkout. | Image aspect ratios support 1:1 (square), 3:4 (portrait), 4:3, 16:9; supports "Minimalist" card style and module-level buttons. |
| Product Display | Highlight a single product with multiple images, variant selectors, and full descriptions. | • Supports Image-Left/Buy-Right or Buy-Left/Image-Right swapping and aspect ratio switching |
| Plan Selection | Create a selection area for multiple variants/plans of a single product for direct checkout. | • Ideal for online courses, consulting packages, or bundle promotions |
| Online Form | Embed contact forms, event registrations, or surveys. | • Supports single or double-column layouts; responses automatically sync to your dashboard (see Online Forms) |
Integration modules allow you to embed public posts, videos, music, surveys, booking calendars, design drafts, or Google Maps locations from other platforms directly into your website. Visitors can view or interact with them without leaving your site.
Integration Modules vs. Third-Party Tracking Codes: Integration modules are frontend content that visitors can see and click on your page. If you need to install Google Tag Manager (GTM), GA4, or Meta Pixel to track ad traffic in the background, please go to "Site Settings › Tracking Codes" (see Third-Party Tracking Tools).
Ensure the post, Reel, short video, or video is set to "Public" on the original platform, then copy the public link using the "Share" button and paste it into the module (do not paste the browser's backend management URL or private post links):
| Integration | Best For | Setup Tips |
|---|---|---|
| YouTube | Brand videos, tutorials, interviews, or public playlists. | Supports side-by-side video grids (adjustable columns per device) and single-video width control. |
| Public IG posts or Reels. | Paste the public URL of a post or Reel; supports multi-post grids. | |
| Public page posts, event posts, videos, or Reels. | Posts must be set to "Public" (if changed to private later, they will stop displaying on your site). | |
| Threads | Public Threads posts and discussion threads. | Paste the public URL of the thread. |
| TikTok | Public TikTok videos and behind-the-scenes content. | Paste the public video link. |
| Showcasing brand inspiration boards or profiles. | Connect your Pinterest account in the module settings first; choose to display your profile or specific boards (click "Sync" after adding new boards). | |
| Behance | Public project portfolios for designers, photographers, and creators. | Paste the public Behance project URL. |
| Discord | Displaying server info and an "Join" button. | Paste the server's public invite link or server ID. |
| Integration | Best For | Setup Tips |
|---|---|---|
| Spotify | Songs, albums, public playlists, or Podcast episodes. | Paste the public share link; supports adjusting columns (1–3) for desktop/tablet and player width. |
| Apple Podcast | Public shows or episode players. | Paste the public share link; supports multi-column grids and width switching. |
| Apple Music | Public song, album, or playlist previews. | Paste the public link; supports multi-column grids and width switching. |
If you are already accustomed to using external survey or booking systems, you can embed them directly into your website. (If you want to receive submissions, organize customer lists, and send confirmation emails directly within the Kanorio backend, we recommend using the built-in Online Forms first):
| Integration | Best For | Checklist Before Going Live |
|---|---|---|
| Calendly | Allow customers to book consultations, viewings, or services directly on your site. | Verify availability, time zones, and notification settings in Calendly before pasting the public booking page URL. |
| Google Forms | Display registration forms or simple surveys. | Ensure "Accepting responses" is enabled and no "Restrict to users in your domain" login requirements are set. |
| SurveyCake | Embed SurveyCake questionnaires. | Ensure the survey is published and paste the public survey URL. |
| Typeform | Embed interactive Typeform forms. | Ensure the form is published and paste the public share link. |
| Integration | Best For | Setup Tips |
|---|---|---|
| Figma | Directly interact with and preview public Figma designs, prototypes, FigJam boards, or presentations. | Click "Share" in Figma, set access to Anyone with the link can view, then paste the link. |
| Google Business Profile | Display store/studio name, address, phone, hours, ratings, and navigation buttons. | Search and link your public Google Business location; supports side-by-side display for multiple locations. |
To protect all visitors and your website's security, maintain fast loading speeds, and ensure stable mobile layouts, Kanorio does not allow you to paste arbitrary HTML, JavaScript, or third-party <iframe> embed codes (please do not paste code into text boxes or URL fields; the system will automatically filter it out).
No! "Integration modules" are for embedding entire IG posts or videos in the middle of a page. If you just want to display a row of brand social icons in your header, footer, hero section, or link-in-bio page for visitors to click, please go to "Edit Website › Brand" and fill in your "Brand Social Links".
Select the "Plan Display" module under the "Information" tab. You can freely fill in the plan name, price, feature list, and booking/inquiry buttons without needing to create products in the store first.