Collapse quoted content in conversation | Community
Skip to main content
Answered

Collapse quoted content in conversation


Forum|alt.badge.img+1

Hey there,

 

i’m curious - intercom does detect quoted parts of mails correctly. It always shows the vertical line(s) on the left to mark the quoted parts of a mail. 

 

However, for some mails, its not possible to collapse the quoted parts. They are shown always. That means I will have to scroll about 2-5 viewports up to see what customer has written. If its a discussion with many mails, the total height gets sometimes 20 or more heights of my browser window. 

I’m sure thats a bug and intercom should be easily able to hide/collapse those parts like it does sometimes and indicated by the three dots at the bottom. 

Please fix! Its a mess reading longer threads.

BR

Christian

Best answer by Christian Leo

I’ve “fixed” that with a css plugin which injects this. 

 

.intercom-interblocks blockquote {
    display: none;
}

Or a little more sophisticated…
 

const style = document.createElement("style");
style.textContent = `
  .message-toggle-btn {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid transparent;
    cursor: pointer;
    font-size: 13px;
    font-family: inherit;
    margin: 6px 0;
    transition: background 0.2s ease, color 0.2s ease, transform 0.1s ease;
    font-weight: 500;
  }
  @media (prefers-color-scheme: light) {
    .message-toggle-btn {
      background: #f7f7f7;
      border-color: #ccc;
      color: #333;
      box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    }
    .message-toggle-btn:hover {
      background: #eaeaea;
      transform: translateY(-1px);
    }
  }
  @media (prefers-color-scheme: dark) {
    .message-toggle-btn {
      background: #2d2d2d;
      border-color: #555;
      color: #f2f2f2;
      box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    }
    .message-toggle-btn:hover {
      background: #3a3a3a;
      transform: translateY(-1px);
    }
  }
`;
document.head.appendChild(style);

function addButtonAboveFirstQuote(messageDiv) {
  if (messageDiv.querySelector(".message-toggle-btn")) return;

  const blockquotes = messageDiv.querySelectorAll(".intercom-interblocks blockquote");
  if (!blockquotes.length) return;

  blockquotes.forEach(bq => (bq.style.display = "none"));

  const button = document.createElement("button");
  button.className = "message-toggle-btn";
  button.textContent = "Show Quotes";

  let visible = false;
  button.addEventListener("click", () => {
    visible = !visible;
    blockquotes.forEach(bq => (bq.style.display = visible ? "block" : "none"));
    button.textContent = visible ? "Hide Quotes" : "Show Quotes";
  });

  const firstQuote = blockquotes[0];
  firstQuote.parentNode.insertBefore(button, firstQuote);
}

function processAllMessages() {
  document.querySelectorAll('div[data-part-group-id]').forEach(msg => {
    addButtonAboveFirstQuote(msg);
  });
}

processAllMessages();

const observer = new MutationObserver(() => {
  processAllMessages();
});
observer.observe(document.body, { childList: true, subtree: true });

This adds a toggle button to show/hide quoted. That workaround sucks a little bit for a product for which I pay so much...

View original
Did this topic help you find an answer to your question?

4 replies

Jacques Reynolds
Intercom Team
Forum|alt.badge.img+7

Hey ​@Christian Leo 👋 Jacques here from Intercom Support. Thanks for reaching out, I hope all is well!

Intercom's email UI typically detects quoted parts of emails and marks them with a vertical line on the left. In many cases, these quoted sections can be collapsed or expanded using a three-dot ("...") button at the bottom of the quoted area. This is similar to how Gmail and other email clients handle quoted content, aiming to keep the conversation view concise and focused on the most recent or relevant messages.

The inability to collapse quoted email parts in some threads is not intended and is likely a bug or a result of edge cases in how emails are formatted or received. I’d recommend reaching out to our Support Team sharing the Conversation URL where this issue occurred so we can dig deeper into this for you!


Forum|alt.badge.img+1
  • Author
  • Active User
  • 10 replies
  • Answer
  • July 24, 2025

I’ve “fixed” that with a css plugin which injects this. 

 

.intercom-interblocks blockquote {
    display: none;
}

Or a little more sophisticated…
 

const style = document.createElement("style");
style.textContent = `
  .message-toggle-btn {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid transparent;
    cursor: pointer;
    font-size: 13px;
    font-family: inherit;
    margin: 6px 0;
    transition: background 0.2s ease, color 0.2s ease, transform 0.1s ease;
    font-weight: 500;
  }
  @media (prefers-color-scheme: light) {
    .message-toggle-btn {
      background: #f7f7f7;
      border-color: #ccc;
      color: #333;
      box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    }
    .message-toggle-btn:hover {
      background: #eaeaea;
      transform: translateY(-1px);
    }
  }
  @media (prefers-color-scheme: dark) {
    .message-toggle-btn {
      background: #2d2d2d;
      border-color: #555;
      color: #f2f2f2;
      box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    }
    .message-toggle-btn:hover {
      background: #3a3a3a;
      transform: translateY(-1px);
    }
  }
`;
document.head.appendChild(style);

function addButtonAboveFirstQuote(messageDiv) {
  if (messageDiv.querySelector(".message-toggle-btn")) return;

  const blockquotes = messageDiv.querySelectorAll(".intercom-interblocks blockquote");
  if (!blockquotes.length) return;

  blockquotes.forEach(bq => (bq.style.display = "none"));

  const button = document.createElement("button");
  button.className = "message-toggle-btn";
  button.textContent = "Show Quotes";

  let visible = false;
  button.addEventListener("click", () => {
    visible = !visible;
    blockquotes.forEach(bq => (bq.style.display = visible ? "block" : "none"));
    button.textContent = visible ? "Hide Quotes" : "Show Quotes";
  });

  const firstQuote = blockquotes[0];
  firstQuote.parentNode.insertBefore(button, firstQuote);
}

function processAllMessages() {
  document.querySelectorAll('div[data-part-group-id]').forEach(msg => {
    addButtonAboveFirstQuote(msg);
  });
}

processAllMessages();

const observer = new MutationObserver(() => {
  processAllMessages();
});
observer.observe(document.body, { childList: true, subtree: true });

This adds a toggle button to show/hide quoted. That workaround sucks a little bit for a product for which I pay so much...


Forum|alt.badge.img+1
  • Author
  • Active User
  • 10 replies
  • July 24, 2025

@Jacques Reynolds Already did that a couple of month ago. Since the solution was kind of “idk, bad formated email, fix not possible, its not our fault” I’m writing here again. 

I’ve “fixed” that myself with some 5 minutes in Browser Console and with the help of GPT. If your dev team wont be able to fix it within the next days, i’m convinced they dont know what they do or are just not interested in fixing bugs...


Forum|alt.badge.img+1
  • Author
  • Active User
  • 10 replies
  • August 12, 2025

Seems like intercom is either not interested in fixing this bug or not able to do it…?