{"site":{"name":"Koji","description":"AI-native customer research platform that helps teams conduct, analyze, and synthesize customer interviews at scale.","url":"https://www.koji.so","contentTypes":["blog","documentation"],"lastUpdated":"2026-05-18T13:47:56.279Z"},"content":[{"type":"documentation","id":"bd7fa68e-83c5-4292-88ce-6579dd38c4ff","slug":"customizing-branding","title":"Customizing Branding","url":"https://www.koji.so/docs/customizing-branding","summary":"Customize your interview landing page with headline, subheadline, description, accent color, orb color variant (6 options), trust badges, interaction modes, language settings, and Open Graph metadata. Changes take effect immediately with a live preview editor.","content":"Every interview landing page can be tailored to match your brand and communicate the right message to participants. From the headline and description to trust badges, orb colors, and Open Graph images, the customize page gives you full control over first impressions.\n\n## Accessing the Customize Page\n\nFrom your project dashboard, click on the **Customize** tab (or navigate to your project's customize page). This opens the editor where you can configure all the branding elements that participants see on your [interview landing page](/docs/interview-landing-page).\n\nThe editor shows a live preview alongside the controls, so you can see exactly how your changes will look before saving.\n\n## What You Can Customize\n\n### Headline\n\nThe headline is the large text displayed prominently on the landing page. It is the first thing participants read, so make it count.\n\n**Default:** Your project name.\n\n**Tips for good headlines:**\n\n- Focus on what the participant will be doing: \"Share Your Onboarding Experience\" is better than \"Onboarding Research Study\"\n- Keep it under 60 characters for clean display on all screen sizes\n- Use action-oriented language that invites participation\n\n**Examples:**\n- \"Help Us Improve Your Checkout Experience\"\n- \"Share Your Thoughts on [Product Name]\"\n- \"Tell Us About Your Workflow\"\n\n### Subheadline\n\nThe subheadline appears directly below the headline and provides a secondary line of context. Use it to add a brief supporting statement that complements your headline.\n\n**Tips:**\n\n- Keep it shorter than the headline\n- Use it to answer \"Why should I participate?\" or to set expectations\n- Leave it empty if your headline and description are sufficient on their own\n\n**Example:**\n- Headline: \"Share Your Onboarding Experience\"\n- Subheadline: \"A quick conversation to help us build a better product\"\n\n### Description\n\nThe description appears below the headline and subheadline. This is where you explain the purpose of the interview and why the participant's input matters.\n\n**Tips:**\n\n- Keep it to two or three sentences\n- Answer the question \"Why should I participate?\"\n- Mention how the feedback will be used if possible\n\n**Example:**\n> We are building the next version of our product and want to hear directly from people who use it daily. This short conversation helps us understand what is working well and where we can improve. Your feedback shapes what we build next.\n\n### CTA Button Text\n\nYou can customize the call-to-action button text that appears in the editor preview. This field is available for setting up your branding identity, though the actual landing page buttons display as \"Start Voice Chat\" and \"Start Text Chat\" with their respective icons.\n\n### Accent Color\n\nChoose an accent color using the color picker to match your brand. The accent color is applied to interactive elements like buttons and highlights throughout the interview experience.\n\n### Orb Color Variant\n\nThe animated orb on the landing page comes in six color variants:\n\n| Variant | Description |\n|---|---|\n| **Aurora** | Cool blues and greens with a northern-lights feel |\n| **Sunset** | Warm oranges and reds |\n| **Ocean** | Deep blues and teals |\n| **Lavender** | Soft purples |\n| **Mint** | Fresh greens |\n| **Peach** | Warm, soft pinks and corals |\n\nChoose the variant that best complements your brand colors and the tone of your research.\n\n### Trust Badges\n\nTrust badges are small visual indicators that reassure participants. Each badge has an icon and a label.\n\nYou can enable or disable the built-in badges and add custom ones. Available badge icons include:\n\n| Icon | Common Use |\n|---|---|\n| Shield | Confidentiality / privacy |\n| Clock | Estimated time |\n| Star | Quality or special status |\n| Check | Verified or confirmed |\n| Lock | Security or anonymity |\n| Heart | Appreciation or care |\n\n**Built-in badges:**\n- **Duration badge** — shows an estimated time (e.g., \"5-10 minutes\")\n- **Anonymity badge** — reassures participants about privacy (e.g., \"Anonymous\")\n\n**Custom badges:** You can add up to four additional badges with your choice of icon and label text.\n\n**Example badge sets:**\n- \"Confidential\" (Shield) + \"5-10 minutes\" (Clock) + \"Anonymous\" (Lock)\n- \"Quick & Easy\" (Star) + \"Takes 5 min\" (Clock) + \"Your voice matters\" (Heart)\n\nBadges appear in a horizontal row below the description on the landing page.\n\n### Interaction Mode Settings\n\nControl which interview modes are available to participants:\n\n- **Both voice and text** — participants see two separate start buttons and choose their preferred mode (default)\n- **Voice only** — only the voice start button appears\n- **Text only** — only the text start button appears\n- **Default mode** — if both are enabled, which mode is presented first\n\nVoice mode requires that your project has a voice agent configured. If it does not, only text mode is available regardless of this setting.\n\n### Language Settings\n\nConfigure the default language for your interviews. When set, a language picker appears on the landing page so participants can select their preferred language. The AI interviewer will conduct the conversation in the chosen language.\n\n### Footer and Consent Text\n\nOptional text fields that appear at the bottom of the landing page:\n\n- **Footer text** — for privacy notices, contact information, or disclaimers\n- **Consent text** — for research consent language\n- **Show Powered by** — toggle visibility of the \"Powered by Koji\" badge\n\n## Open Graph Settings\n\nOpen Graph (OG) metadata controls the preview that appears when your interview link is shared on social media, Slack, email, or messaging apps.\n\n### Why OG Images Matter\n\nA link shared on LinkedIn or Slack with a custom preview image gets significantly more clicks than one with a generic or missing preview. If you are distributing your interview through social channels, configuring OG metadata is one of the highest-leverage things you can do.\n\n### Configurable Fields\n\n- **OG Title** — the title shown in link previews (falls back to your project headline)\n- **OG Description** — the description shown in link previews (falls back to your project description)\n- **OG Image URL** — a custom image for the preview\n\n### Image Specifications\n\n- **Dimensions:** 1200 x 630 pixels (standard OG image size)\n- **Format:** PNG or JPEG\n- **File size:** Under 2 MB for fast loading\n- **Content:** Include your brand logo, study title, or a visual that represents the research topic\n\nIf you do not set a custom OG image, a default preview is generated using your project name and Koji branding.\n\n### Testing Your OG Preview\n\nAfter uploading your image, you can test how it looks on different platforms:\n\n- Share the link in a private Slack channel to see the preview\n- Use a tool like the LinkedIn Post Inspector or Twitter Card Validator to preview the card\n\nOG images are cached by platforms, so changes may take some time to propagate.\n\n## Saving Your Changes\n\nThe customize editor tracks unsaved changes and shows a save button when modifications are detected. Click **Save** to apply your changes. They take effect immediately — the next participant who visits your landing page will see the updated branding.\n\nThe live preview in the editor reflects your changes in real time, so you can iterate quickly before saving.\n\n## Branding and the Embed Widget\n\nWhen your interview is loaded through the [embed widget](/docs/using-the-embed-widget), the same branding settings apply. The headline, description, and badges render inside the iframe using the theme specified in the embed code (dark or light).\n\nOG images are not relevant for embeds since the landing page is rendered inside the iframe rather than shared as a link.\n\n## Best Practices\n\n1. **Write for your audience.** If you are interviewing enterprise buyers, use professional language. If you are talking to Gen Z consumers, keep it casual and approachable.\n2. **Use the subheadline.** A strong subheadline paired with a clear headline can communicate your message without participants needing to read the full description.\n3. **Show estimated time.** A trust badge showing \"5-10 minutes\" or \"Takes ~10 min\" dramatically reduces drop-off.\n4. **Choose an orb color that fits your brand.** The orb is a prominent visual element — pick a variant that complements your accent color.\n5. **Be honest about purpose.** Participants appreciate knowing why they are being interviewed. Vague descriptions lead to lower completion rates.\n6. **Invest in the OG image.** If social sharing is a key distribution channel, a branded preview image is worth the effort.\n7. **Test on mobile.** Open your interview link on your phone to see how the landing page looks on a smaller screen.\n\n## Next Steps\n\n- [Interview Landing Page](/docs/interview-landing-page) — see how all these elements come together\n- [Intake Forms and Consent](/docs/intake-forms-and-consent) — add data collection before the interview starts\n- [Publishing Your Study](/docs/publishing-your-study) — make your customized interview live","category":"Interview Experience","lastModified":"2026-05-17T03:21:34.303214+00:00","metaTitle":"Customizing Branding — Koji Docs","metaDescription":"Personalize your Koji interview landing page with custom headlines, descriptions, trust badges, and OG images.","keywords":["branding","customize","landing page","OG image","Open Graph","trust badges","headline"],"aiSummary":"Customize your interview landing page with headline, subheadline, description, accent color, orb color variant (6 options), trust badges, interaction modes, language settings, and Open Graph metadata. Changes take effect immediately with a live preview editor.","aiPrerequisites":["interview-landing-page"],"aiLearningOutcomes":["Access and use the customize editor","Configure headlines, descriptions, and trust badges","Upload and test Open Graph images","Control which interview modes are available"],"aiDifficulty":"beginner","aiEstimatedTime":"6 min read"}],"pagination":{"total":1,"returned":1,"offset":0}}