Intercom chat log prints invisible divider — style override
Joe B.
Expert ★★★★★ 27,853 satisfied customers
Specialities: Intercom Inbox & Messenger UI, conversation transcript export, print-to-PDF issues, @media print CSS, CSS specificity & overrides, CSS variables (light/dark themes)
Intercom chat log prints invisible divider — fix print CSS, borders, and theme overrides
Technician
A few quick details so we pick the right solution (Intercom has a couple print/export paths):
• Are you printing directly from the Intercom Inbox in the browser (Chrome/Edge/Safari), or from an exported conversation PDF/text?
• Is the divider invisible only in print preview, or also on the final PDF/printed page?
• Are you using dark mode (Intercom theme or OS/browser theme)? Any custom CSS extensions (Stylus/UserCSS) or corporate “branding” overrides?
• What exactly is missing: thin horizontal lines between messages, borders around bubbles, or timestamp separators?
The common causes are: a print stylesheet that removes borders, a color that becomes white-on-white in print, browser “don’t print backgrounds,” or a CSS variable that resolves differently during printing. We’ll fix it with a clean print CSS override (and I’ll also show a safe Intercom-native export option if printing the UI is unreliable).
Technician
What usually happens under the hood:
• Intercom (or the browser) applies a special @media print stylesheet that simplifies the UI for printing — sometimes it removes borders, shadows, or separators entirely.
• Even when the divider is still present, it may be a very light color (like rgba gray) and printing optimizations make it fade to white.
• Chrome can also skip “background graphics,” and some UI dividers are actually backgrounds/gradients rather than borders.
• Your internal “font enlarge” style tool may unintentionally override border-color, opacity, or CSS variables used for separators.
We’ll fix this in two tracks: (1) a quick “safe export” inside Intercom, and (2) a targeted style override for print so the PDF keeps visible message separators.
Technician
Step 1 — Use Intercom’s built-in conversation export (recommended)
In the Intercom Inbox, open the conversation → click the three dots (more menu) → choose Export conversation (often “as text” or “as PDF” depending on your workspace and permissions). That gives you a transcript file that’s not affected by missing dividers, dark mode, or Chrome’s print settings.
If you still need a “printed UI look” (message bubbles + spacing), we’ll do a print-only override safely using @media print, so it won’t touch the normal on-screen view.
Technician
Step 2 — Print-only CSS override (targets dividers/borders)
Wherever your internal CSS tool lets you add rules (or a userstyle like Stylus), add something like this and keep it print-only:
@media print {
/* Force visible separators (generic approach) */
* { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
hr, .divider, .separator { opacity: 1 !important; }
hr, .divider, .separator { border-color: #999 !important; background: #999 !important; }
/* Make thin lines print reliably */
hr, .divider, .separator { border-width: 1px !important; }
}Why this works: many “Intercom chat divider” elements are low-opacity or theme-variable driven. In print, low-contrast grays disappear. This override forces a consistent printed color and prevents the browser from downgrading it. (Exact class names differ, so we’ll confirm the divider element with Inspect.)
Technician
--border-subtle or low-opacity colors that look fine on dark backgrounds, but become invisible on a white print page.Step 3 — Identify the divider without relying on class names
Instead of targeting a random generated class, target structure and common divider patterns:
• Many dividers are
<hr>, a border-bottom on a wrapper, or a pseudo-element like ::before / ::after that draws a line.In Chrome DevTools:
1) Right-click the “missing divider area” → Inspect.
2) In the Styles panel, look for rules that set border, background, opacity, or a variable used for border color.
3) In the Computed panel, search “border” and see which element actually owns the line.
Step 4 — Fix the print theme mismatch
For print output, you usually want to force a light theme and strong contrast:
• If possible, switch Intercom to light mode before printing.
• If your environment forces dark mode, add print CSS that sets the conversation container background to white and the divider to a darker gray/black.
This is why we keep everything in @media print: the on-screen UI stays untouched.
Technician
Step 5 — Print settings that impact dividers
In the print dialog (Chrome):
• Enable Background graphics if your divider is implemented as a background, gradient, or shadow (some UIs do that).
• Set “Scale” to 100% (avoid “Fit to page” if it makes lines too thin).
• If available, try “More settings” → choose a higher “Quality” output (varies by OS).
Step 6 — Make separators print-friendly
If the divider is very thin or opacity-based, force it to a simple border that printers/PDF engines handle consistently:
@media print {
/* Example pattern: add a border between message blocks */
.message, .chat, [data-message] { border-bottom: 1px solid #999 !important; }
[data-timestamp], .timestamp { color: #333 !important; opacity: 1 !important; }
}Even if class names differ, the idea is the same: use a plain border-bottom (not a faint background) and disable opacity tricks in print.
Technician
* { color: ... } or global opacity/filters can absolutely break separators, especially if the divider uses inherited properties or CSS variables.Step 7 — Guardrail your overrides (print-safe and specific)
Best practice is to avoid global selectors and keep print fixes scoped to the conversation area. For example:
@media print {
/* Scope fixes to the main conversation container */
main, .conversation, .inbox, body { background: #fff !important; }
hr { border-color: #999 !important; opacity: 1 !important; }
* { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}If your tool lets you toggle rules, try printing once with your “enlarge fonts” rules disabled. If the divider comes back, we’ll refine those overrides (e.g., exclude
hr, exclude pseudo-elements, or stop overwriting opacity). This is often the real reason an Intercom print divider is invisible even though others can print fine.
Technician
Use Intercom Export (text/PDF) when:
• You need a compliance record that must be consistent regardless of theme, Chrome settings, or injected CSS.
• You need the content searchable and easy to archive (text transcript is excellent).
Use Print-to-PDF (UI layout) when:
• You specifically need the “visual layout” of the conversation for internal review.
• You can control the environment (light mode preferred, no global CSS overrides, print-only fixes applied).
And the “always do” items: keep a print-only @media print override available, avoid global style injections, enable Background graphics if needed, and force print-color-adjust so borders/dividers don’t get optimized away.
Technician
1) Prefer Export conversation (text/PDF) inside Intercom when you need a clean compliance copy.
2) If you must print the UI, switch to light mode and disable any global CSS injectors (they often kill border/opacity).
3) Add a print-only CSS override using @media print to force divider visibility (border-color/opacity) and set print-color-adjust / -webkit-print-color-adjust to “exact.”
4) In Chrome print dialog, enable Background graphics if the divider is a background/gradient instead of a border.
If you want, start a chat and I can help you target the exact divider element in your Intercom UI and produce a minimal, safe override that won’t conflict with your internal font tools.
Quick answer: the accepted fix
Accepted fix when an Intercom chat log prints invisible divider: disable any global CSS injector (common cause), switch to light mode, then add a print-only @media print override that forces separator border-color and opacity (and sets print-color-adjust / -webkit-print-color-adjust to “exact”). If printing the UI is still inconsistent, use Intercom’s Export conversation (text/PDF) for a reliable transcript that won’t lose dividers.
Why Intercom dividers disappear in print preview or Save as PDF
When you print a web app like Intercom Inbox, the browser often applies print optimizations: it can drop subtle UI effects, reduce contrast, and ignore backgrounds unless “Background graphics” is enabled. Many chat separators are implemented as faint 1px borders, low-opacity lines, gradients, or theme-variable colors designed for screen viewing. In dark mode, those variables can look correct on a dark background — but printing typically flips to a white page, making the same divider effectively white-on-white.
Another frequent cause is a style override from a userstyle extension or corporate CSS injection that applies broad selectors (like * { color: ... } or opacity filters). These can unintentionally override divider colors, opacity, or pseudo-elements. The fix is to keep overrides scoped and apply a dedicated @media print CSS rule that forces visible separators.
How to confirm it’s a print CSS / style override problem
Use a quick triage before you spend time chasing the wrong thing. First, open print preview and check if the divider is missing there — if yes, it’s a print stylesheet or browser setting issue. Next, disable any custom CSS injection tools and try again; if the divider returns, your override was the cause. Finally, inspect the divider area and check whether the separator is an <hr>, a border-bottom rule, or a pseudo-element. If you see opacity or CSS variables controlling the line color, forcing a solid border color in @media print will usually fix it.
If you need a guaranteed artifact for compliance, use Intercom Export conversation (text/PDF) rather than printing the UI — it avoids browser variability and keeps your transcript consistent.
Intercom chat log prints invisible divider — quick troubleshooting tips
Force visible borders in @media print, avoid global overrides, and use Intercom export for compliance copies.
Fast path: disable global userstyles or corporate CSS injection, switch to light mode, then add a @media print override that forces divider border-color and opacity and enables print-color-adjust / -webkit-print-color-adjust. In Chrome print settings, enable Background graphics if the separator is drawn as a background/gradient. If consistency matters most, export the conversation transcript directly from Intercom (text/PDF) instead of printing the UI.
Disclaimer: This information is AI-generated and intended for general guidance only. For advice specific to your Intercom workspace settings, browser version, and compliance requirements, please consult a verified expert on Whizz-Tech before changing system or export settings.
Getting Started Is Easy
Ask for help, 24/7
Members get round-the-clock access to certified Experts for Intercom print-to-PDF problems, invisible dividers, missing chat separators, and print CSS override fixes.
Expert will respond in minutes
We match you with a specialist who understands Intercom Inbox exports, transcript downloads, Chrome print quirks, @media print, CSS variables, and safe style overrides.
Save time & money
Stop re-printing chat logs and manually stitching screenshots. Get a repeatable workflow for print-ready Intercom conversation PDFs and transcripts.
FAQ
Why does my Intercom chat divider disappear when I print or Save as PDF?
Most often it’s caused by print styles reducing contrast, disabling backgrounds, or dropping subtle UI effects like thin borders and low-opacity lines. Dark mode and CSS variables can also make dividers look fine on screen but turn invisible on a white print page. A global style override tool can worsen this by overwriting border colors or opacity.
How do I fix Intercom chat logs where separators/borders are invisible only in print?
Add a print-only @media print rule that forces separator visibility (solid border color, opacity 1, and 1px border width). Also set print-color-adjust / -webkit-print-color-adjust to “exact.” Disable global CSS injection tools, and enable “Background graphics” in Chrome if the divider is drawn as a background.
Is there a better way than printing the Intercom UI for compliance?
Yes. In the Intercom Inbox, many workspaces can Export conversation as text or PDF from the conversation menu. This avoids browser print differences and produces a consistent transcript that’s easier to archive and search.
Does dark mode affect printed Intercom chat logs?
It can. Dark mode often relies on subtle gray separators and theme variables that print poorly when the browser switches to a white page. For consistent results, switch to light mode before printing, or apply a print-only CSS override that forces high-contrast divider colors and readable timestamps.
Sources
- Intercom Help — Export your conversations data (export conversation as text/PDF)
- Intercom Help — Conversations FAQs (download a transcript / export conversation)
- MDN — print-color-adjust (controls print color optimization)
Filed under: General Printer Problems
Related articles
- MS Teams chat export prints tiny — scale + font smoothing trick
- Next.js SSR form prints missing input borders — hydration
- CBP EVUS page prints truncated top — browser fit
- Insurance EOB PDF prints cropped CPT codes — border margin
- Salesforce PDF contract prints misaligned fields — template DPI checks you can do safely
- Premiere frame export prints jagged — TIFF: safe checks before you change settings
- Fusion 360 drawing prints missing dimensions — export mode and print pipeline checks
- Wedding seating chart prints tiny — fit-layout fix