About panel attributes in Contact Center

<body>
<p id="docs-hc-snippet" style="display: none;">Panel attributes in Contact Center give you tools to present detailed information to agents.</p>
<div class="article-banners">
<div id="docs-wmp-link">
<a href="https://support.zendesk.com/hc/en-us/articles/5411234991258-plan" rel="noopener" target="_blank">What's my plan?</a>
</div>

<div class="article-banner" id="addon_contact-center">
<table>
<tbody>
<tr>
<td>
<strong>Add-on</strong>
</td>
<td>Contact Center</td>
</tr>
</tbody>
</table>
</div>

</div>
<div id="docs-ai-summary">
<p id="docs-ai-summary-toggle">Verified AI summary <span id="up-triangle">◀</span><span id="down-triangle">▼</span></p>
<p id="docs-ai-summary-content">Panel attributes in Contact Center allow you to display detailed information to agents using full-width panels with customizable color themes. You can enhance these panels with Markdown for text styling, such as bold or headings. Use a JSON structure to define text and themes, making it easier to present clear, organized information. Explore themes and Markdown to optimize your contact attributes panel.</p>
</div>

<div class="body">

<p class="p">Panel attributes in Contact Center give you tools to present detailed information to
agents.</p>
<p class="p">Panel attributes appear full-width in the contact attributes panel and can be customized
to use different color themes. Additionally, you can use basic markdown formatting.</p>
<p class="p" dir="ltr"><img class="image" id="rjs1__image_zf4_ct2_tgc" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/cc_pa_1.png" width="450"></p>
<p class="p" dir="ltr">Similar to other enhanced attributes in Contact Center, you make an attribute a
panel by adding a prefix to the attribute name.</p>
<div class="p">
<strong class="ph b">To make an attribute a label</strong><ul class="ul" id="rjs1__ul_b5p_1lt_tgc">
<li class="li">Add a prefix to the attribute name, using a basic JSON structure as the
attribute value to control the text, theme and icon.</li>
</ul>
</div>
<div class="bodydiv" dir="ltr">
<p class="p">Additionally, you can use markdown formatting for simple styling, such
as bold or underline or more advanced formats, such as links, headings and images.
See the <a class="xref" href="https://www.markdownguide.org/cheat-sheet/" target="_blank">Markdown Guide</a>.</p>
You can use the Attribute Builder
tool to help generate this value. Using the example above would look something like
this:</div>
<pre class="pre"><em class="ph i">panel_AuthenticationResult: {"text":"## Diagnostic Result\n\n1. Authentication **Failed**\n1. Test Two *Running*","theme":"info"}</em></pre>
<p class="p" dir="ltr">For information about the available themes, see <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/9696142331034" target="_blank">label attributes</a>.</p>
</div>
<script id="docs-schema-markup" type="application/ld+json">{
"@context": "https://schema.org",
"@type": "TechArticle",
"@id": "https://support.zendesk.com/hc/en-us/articles/9696112973210-About-panel-attributes-in-Contact-Center",
"url": "https://support.zendesk.com/hc/en-us/articles/9696112973210-About-panel-attributes-in-Contact-Center",
"headline": "About panel attributes in Contact Center",
"description": "You can customize panel attributes in Contact Center to display detailed information with color themes and markdown formatting by adding a prefix to the attribute name and using JSON structure for control.",
"articleSection": "Using Contact Center",
"datePublished": "2025-09-09T20:14:32+00:00",
"dateModified": "2026-04-15T21:31:34.378214+00:00",
"inLanguage": "en-US",
"mainEntityOfPage": {
"@type": "WebPage",
"@id": "https://support.zendesk.com/hc/en-us/articles/9696112973210-About-panel-attributes-in-Contact-Center"
},
"author": {
"@type": "Organization",
"name": "Zendesk",
"url": "https://www.zendesk.com"
},
"publisher": {
"@type": "Organization",
"name": "Zendesk"
},
"isPartOf": {
"@type": "WebSite",
"name": "Zendesk Help",
"url": "https://support.zendesk.com/hc/en-us"
},
"about": {
"@type": "SoftwareApplication",
"name": "Zendesk"
}
}</script><script id="ai-summary-script">
//<![CDATA[
const ai_summary_style = document.createElement('style');
ai_summary_style.innerHTML = `#styled-article-body{padding:0 0 0}#article-body #docs-ai-summary{background-color:#f3f3f3;border:1px solid #d3d3d3;padding:10px 10px 6px;margin-bottom:16px}#article-body #docs-ai-summary #docs-ai-summary-toggle{font-size:.9em;font-weight:700;margin-bottom:4px;cursor:pointer;display:flex;justify-content:space-between;align-items:center}#article-body #docs-ai-summary #docs-ai-summary-toggle #up-triangle{margin-left:auto;padding-right:10px;display:none}#article-body #docs-ai-summary #docs-ai-summary-toggle #down-triangle{margin-left:auto;padding-right:10px}#article-body #docs-ai-summary #docs-ai-summary-content{font-size:.9em;padding-left:25px;padding-right:25px;margin-bottom:12px}`;
document.head.appendChild(ai_summary_style);

const toggleAISummary = () => {
const summary = document.getElementById("docs-ai-summary-content");
const upTriangle = document.getElementById("up-triangle");
const downTriangle = document.getElementById("down-triangle");
if (summary.style.display === "none") {
summary.style.display = "block";
upTriangle.style.display = "none";
downTriangle.style.display = "inline";
} else {
summary.style.display = "none";
upTriangle.style.display = "inline";
downTriangle.style.display = "none";
}
};

document.getElementById("docs-ai-summary-toggle").addEventListener("click", toggleAISummary);
//]]>
</script>
</body>