Contact - Done
1 min
HTML
<section class="section">
<div class="w-layout-blockcontainer body-container w-container">
<div class="page-header">
<div class="w-layout-grid grid-2">
<div class="page-header-left">
<div class="breadcrumbs">
<div class="breadcrumb">Audience</div>
<div class="breadcrumb-divider">/</div>
<a href="{contacts}" class="breadcrumb">Contacts</a>
<div class="breadcrumb-divider">/</div>
<a href="#" class="breadcrumb">John Doe</a>
</div>
<div>
<h1>John Doe</h1>
</div>
</div>
</div>
</div>
<div class="content-area">
<div class="tabs-wrapper">
<div class="tabs-container">
<div data-current="Overview" data-easing="ease" data-duration-in="300" data-duration-out="100" class="tabs w-tabs">
<!-- START Tabs Menu -->
<div class="tabs-menu w-tab-menu">
<a data-w-tab="Overview" class="tab w-inline-block w-tab-link">
<div class="tab-icon w-embed"><svg width="20" height="20" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 32 32">
<rect x="24" y="21" width="2" height="5"></rect>
<rect x="20" y="16" width="2" height="10"></rect>
<path d="M11,26a5.0059,5.0059,0,0,1-5-5H8a3,3,0,1,0,3-3V16a5,5,0,0,1,0,10Z"></path>
<path d="M28,2H4A2.002,2.002,0,0,0,2,4V28a2.0023,2.0023,0,0,0,2,2H28a2.0027,2.0027,0,0,0,2-2V4A2.0023,2.0023,0,0,0,28,2Zm0,9H14V4H28ZM12,4v7H4V4ZM4,28V13H28.0007l.0013,15Z"></path>
</svg></div>
<div class="tab-name">Overview</div>
</a>
<a data-w-tab="PulseChecks" class="tab w-inline-block w-tab-link">
<div class="tab-icon w-embed"><svg fill="currentColor" width="20" height="20" viewbox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
<path d="M432,272a48.09,48.09,0,0,0-45.25,32H347.53l-28.35-85.06a16,16,0,0,0-30.56.66L244.11,375.36l-52.33-314a16,16,0,0,0-31.3-1.25L99.51,304H48a16,16,0,0,0,0,32h64a16,16,0,0,0,15.52-12.12l45.34-181.37,51.36,308.12A16,16,0,0,0,239.1,464c.3,0,.6,0,.91,0a16,16,0,0,0,15.37-11.6l49.8-174.28,15.64,46.94A16,16,0,0,0,336,336h50.75A48,48,0,1,0,432,272Z"></path>
</svg></div>
<div class="tab-name">PulseChecks</div>
</a>
<a data-w-tab="Feedback" class="tab w-inline-block w-tab-link">
<div class="tab-icon w-embed"><svg width="20" height="20" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 32 32">
<path class="cls-2" d="m19,3h10c1.1035,0,2,.8965,2,2v6c0,1.1035-.8965,2-2,2h-2.4229s-1.7314,3-1.7314,3l-1.7324-1,2.3096-4h3.5771s0-6,0-6h-10s0,6,0,6h3v2h-3c-1.1035,0-2-.8965-2-2v-6c0-1.1035.8965-2,2-2Z"></path>
<path class="cls-2" d="m15,30h-2v-5c-.0018-1.6561-1.3439-2.9982-3-3h-4c-1.6561.0018-2.9982,1.3439-3,3v5H1v-5c.0033-2.7601,2.2399-4.9967,5-5h4c2.7601.0033,4.9967,2.2399,5,5v5Z"></path>
<path class="cls-2" d="m8,10c1.6569,0,3,1.3431,3,3s-1.3431,3-3,3-3-1.3431-3-3c.0019-1.6561,1.3439-2.9981,3-3m0-2c-2.7614,0-5,2.2386-5,5s2.2386,5,5,5,5-2.2386,5-5-2.2386-5-5-5Z"></path>
</svg></div>
<div class="tab-name">Feedback</div>
<!-- START Feedback Indicator/Counter - show if there is unread feedback -->
<div class="counter">2</div>
<!-- END Feedback Indicator/Counter -->
</a>
<a data-w-tab="Testimonials" class="tab w-inline-block w-tab-link">
<div class="tab-icon w-embed"><svg fill="currentColor" width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 32 32">
<path d="M12,15H6.11A9,9,0,0,1,10,8.86l1.79-1.2L10.69,6,8.9,7.2A11,11,0,0,0,4,16.35V23a2,2,0,0,0,2,2h6a2,2,0,0,0,2-2V17A2,2,0,0,0,12,15Z"></path>
<path d="M26,15H20.11A9,9,0,0,1,24,8.86l1.79-1.2L24.7,6,22.9,7.2A11,11,0,0,0,18,16.35V23a2,2,0,0,0,2,2h6a2,2,0,0,0,2-2V17A2,2,0,0,0,26,15Z"></path>
</svg></div>
<div class="tab-name">Testimonials</div>
<!-- START Testimonial Indicator/Counter - show if there are unread testimonials -->
<div class="counter">1</div>
<!-- END Testimonial Indicator/Counter -->
</a>
<a data-w-tab="History" class="tab w-inline-block w-tab-link">
<div class="tab-icon w-embed"><svg width="20" height="20" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 32 32">
<rect x="24" y="21" width="2" height="5"></rect>
<rect x="20" y="16" width="2" height="10"></rect>
<path d="M11,26a5.0059,5.0059,0,0,1-5-5H8a3,3,0,1,0,3-3V16a5,5,0,0,1,0,10Z"></path>
<path d="M28,2H4A2.002,2.002,0,0,0,2,4V28a2.0023,2.0023,0,0,0,2,2H28a2.0027,2.0027,0,0,0,2-2V4A2.0023,2.0023,0,0,0,28,2Zm0,9H14V4H28ZM12,4v7H4V4ZM4,28V13H28.0007l.0013,15Z"></path>
</svg></div>
<div class="tab-name">History</div>
</a>
<a data-w-tab="Settings" class="tab w-inline-block w-tab-link w--current">
<div class="tab-icon w-embed"><svg width="20" height="20" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 32 32">
<path d="M27,16.76c0-.25,0-.5,0-.76s0-.51,0-.77l1.92-1.68A2,2,0,0,0,29.3,11L26.94,7a2,2,0,0,0-1.73-1,2,2,0,0,0-.64.1l-2.43.82a11.35,11.35,0,0,0-1.31-.75l-.51-2.52a2,2,0,0,0-2-1.61H13.64a2,2,0,0,0-2,1.61l-.51,2.52a11.48,11.48,0,0,0-1.32.75L7.43,6.06A2,2,0,0,0,6.79,6,2,2,0,0,0,5.06,7L2.7,11a2,2,0,0,0,.41,2.51L5,15.24c0,.25,0,.5,0,.76s0,.51,0,.77L3.11,18.45A2,2,0,0,0,2.7,21L5.06,25a2,2,0,0,0,1.73,1,2,2,0,0,0,.64-.1l2.43-.82a11.35,11.35,0,0,0,1.31.75l.51,2.52a2,2,0,0,0,2,1.61h4.72a2,2,0,0,0,2-1.61l.51-2.52a11.48,11.48,0,0,0,1.32-.75l2.42.82a2,2,0,0,0,.64.1,2,2,0,0,0,1.73-1L29.3,21a2,2,0,0,0-.41-2.51ZM25.21,24l-3.43-1.16a8.86,8.86,0,0,1-2.71,1.57L18.36,28H13.64l-.71-3.55a9.36,9.36,0,0,1-2.7-1.57L6.79,24,4.43,20l2.72-2.4a8.9,8.9,0,0,1,0-3.13L4.43,12,6.79,8l3.43,1.16a8.86,8.86,0,0,1,2.71-1.57L13.64,4h4.72l.71,3.55a9.36,9.36,0,0,1,2.7,1.57L25.21,8,27.57,12l-2.72,2.4a8.9,8.9,0,0,1,0,3.13L27.57,20Z" transform="translate(0 0)"></path>
<path d="M16,22a6,6,0,1,1,6-6A5.94,5.94,0,0,1,16,22Zm0-10a3.91,3.91,0,0,0-4,4,3.91,3.91,0,0,0,4,4,3.91,3.91,0,0,0,4-4A3.91,3.91,0,0,0,16,12Z" transform="translate(0 0)"></path>
</svg></div>
<div class="tab-name">Settings</div>
</a>
</div>
<!-- END Tabs Menu -->
<!-- START Tabs Content -->
<div class="tabs-content w-tab-content">
<!-- START Overview Tab -->
<div data-w-tab="Overview" class="tab-pane w-tab-pane w--tab-active">
<div class="w-layout-grid dashboard-grid">
<!-- START Pulse Score Tile -->
<!-- This will show their average pulse over time, because we working with Different PulseChecks at potentially different intervals I think we should just store a monthly average PulseScore for the contact each month that we can use for trend charts -->
<div id="pulse-score" class="dashboard-tile">
<div class="dashboard-card-header">
<div class="dashboard-tile-heading-container">
<div class="icon _20 brand-text w-embed">
<svg fill="currentColor" width="32" height="32" viewbox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M432,272a48.09,48.09,0,0,0-45.25,32H347.53l-28.35-85.06a16,16,0,0,0-30.56.66L244.11,375.36l-52.33-314a16,16,0,0,0-31.3-1.25L99.51,304H48a16,16,0,0,0,0,32h64a16,16,0,0,0,15.52-12.12l45.34-181.37,51.36,308.12A16,16,0,0,0,239.1,464c.3,0,.6,0,.91,0a16,16,0,0,0,15.37-11.6l49.8-174.28,15.64,46.94A16,16,0,0,0,336,336h50.75A48,48,0,1,0,432,272Z"></path></svg>
</div>
<h2 class="dashboard-card-heading brand">Pulse</h2>
</div>
<div class="flex">
<div data-trend="up" class="dashboard-pulse-score-trend-icon-container">
<div class="icon _24 danger-text w-embed">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 18 13.5 8.5 8.5 13.5 1 6"></polyline><polyline points="17 18 23 18 23 12"></polyline></svg>
</div>
</div>
<div data-tippy-content="<p>Pulse Score reflects this contact's overall sentiment, based on their responses, comments, and NPS.</p> <p>It's a number out of 100, with higher scores indicating more positive feedback. The arrow shows whether their sentiment is improving or declining compared to the previous period.</p> <ul> <li>A high score suggests strong satisfaction and a healthy experience</li> <li>A declining score may signal a change in sentiment worth exploring</li> </ul> <p>This score helps you monitor how an individual contact feels over time.</p>" class="dashboard-tile-help w-embed">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
</div>
</div>
</div>
<div class="dashboard-tile-content">
<div class="dashboard-tile-content">
<div id="pulse-score">92%</div>
</div>
</div>
<div class="dashboard-tile-footer no-gap">
<div class="flex-down full gap-5">
<div id="pulseScoreSparkline" class="dashboard-pulse-score-sparkline"></div>
<div class="dropdown-divider-container">
<div class="divider"></div>
</div>
<div class="flex center">
<div>Last Response:</div>
<div><strong>{date of last completed PulseCheck - e.g. Mar 28, 2025}</strong></div>
</div>
</div>
</div>
</div>
<!-- END Pulse Score Tile -->
<!-- START Net Promoter Score Tile -->
<div id="net-promoter" class="dashboard-tile">
<div class="dashboard-card-header">
<div class="dashboard-tile-heading-container">
<div class="icon _20 brand-text w-embed">
<svg fill="currentColor" width="32" height="32" viewbox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path d="M30,20a13.8535,13.8535,0,0,0-2.2291-7.5288l-1.4452,1.4453A11.8917,11.8917,0,0,1,28,20Z"></path><path d="M28,9.414,26.5859,8,18.019,16.5669A3.9521,3.9521,0,0,0,16,16a4,4,0,1,0,4,4,3.9533,3.9533,0,0,0-.5669-2.0191ZM16,22a2,2,0,1,1,2-2A2.0023,2.0023,0,0,1,16,22Z"></path><path d="M16,8a11.9086,11.9086,0,0,1,6.0833,1.6743l1.4536-1.4536A13.9773,13.9773,0,0,0,2,20H4A12.0137,12.0137,0,0,1,16,8Z"></path></svg>
</div>
<h2 class="dashboard-card-heading">Net Promoter Score®</h2>
</div>
<div class="flex">
<div data-trend="up" class="dashboard-pulse-score-trend-icon-container">
<div class="icon _24 danger-text w-embed">
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 18 13.5 8.5 8.5 13.5 1 6"></polyline><polyline points="17 18 23 18 23 12"></polyline></svg>
</div>
</div>
<div data-tippy-content="<p>This shows the most recent monthly NPS score available for this contact. If they responded multiple times in that month, the score is averaged and rounded to the nearest whole number.</p><p>NPS is based on the question: "How likely are you to recommend us?" on a 0–10 scale.</p><ul><li>9–10: Promoter</li><li>7–8: Passive</li><li>0–6: Detractor</li></ul>" class="dashboard-tile-help w-embed">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
</div>
</div>
</div>
<div class="dashboard-tile-content">
<div id="response-rate-percent">{NPS average monthly actual score rounded to show as a 0-10 score}</div>
<!-- note if no average NPS for the current month, use the last month we have data for.-->
</div>
<div class="dashboard-tile-footer no-gap">
<div class="flex-down full gap-5">
<div class="progress-bar-container">
<div class="progress-bar-base">
<div class="progress-bar-progress" data-progress-variable-color="true" style="width: {monthly average NPS as a %};"></div>
</div>
</div>
<div class="dropdown-divider-container">
<div class="divider"></div>
</div>
<div class="flex center">
<div>Promoter Status:</div>
<!-- START IF NPS score 9-10 -->
<div class="warn-text"><strong>Promoter</strong></div>
<!-- END IF NPS score 9-10 -->
<!-- START IF NPS score 7-8 -->
<div class="warn-text"><strong>Passive</strong></div>
<!-- END IF NPS score 7-8 -->
<!-- START IF NPS score 0-6 -->
<div class="warn-text"><strong>Detractor</strong></div>
<!-- END IF NPS score 0-6 -->
</div>
</div>
</div>
</div>
<!-- END Net Promoter Score Tile -->
<!-- START Response Rate Tile -->
<div id="response-rate" class="dashboard-tile">
<div class="dashboard-card-header">
<div class="dashboard-tile-heading-container">
<div class="icon _20 brand-text w-embed">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="20" height="20" viewbox="0 0 32 32"><path d="M30,20a13.8535,13.8535,0,0,0-2.2291-7.5288l-1.4452,1.4453A11.8917,11.8917,0,0,1,28,20Z"></path><path d="M28,9.414,26.5859,8,18.019,16.5669A3.9521,3.9521,0,0,0,16,16a4,4,0,1,0,4,4,3.9533,3.9533,0,0,0-.5669-2.0191ZM16,22a2,2,0,1,1,2-2A2.0023,2.0023,0,0,1,16,22Z"></path><path d="M16,8a11.9086,11.9086,0,0,1,6.0833,1.6743l1.4536-1.4536A13.9773,13.9773,0,0,0,2,20H4A12.0137,12.0137,0,0,1,16,8Z"></path></svg>
</div>
<h2 class="dashboard-card-heading">Response Rate</h2>
</div>
<div class="flex">
<div data-tippy-content="<p>This shows the percentage of PulseChecks this contact has completed out of the ones they were sent.</p>" class="dashboard-tile-help w-embed">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
</div>
</div>
</div>
<div class="dashboard-tile-content">
<div id="response-rate-percent">{response rate as a %}</div>
</div>
<div class="dashboard-tile-footer no-gap">
<div class="flex-down full gap-5">
<div class="progress-bar-container">
<div class="progress-bar-base">
<div class="progress-bar-progress" data-progress-variable-color="true" style="width: {response rate as a %};"></div>
</div>
</div>
<div class="dropdown-divider-container">
<div class="divider"></div>
</div>
<div class="flex center">
<div>PulseChecks Completed:</div>
<div><strong>{Total number of PulseCheck instances completed}</strong></div>
</div>
</div>
</div>
</div>
<!-- END Response Rate Tile -->
<!-- START Feedback Tile -->
<div id="feedback" class="dashboard-tile">
<div class="dashboard-card-header">
<div class="dashboard-tile-heading-container">
<div class="icon _20 brand-text w-embed">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="20" height="20" viewbox="0 0 32 32"><path class="cls-2" d="m19,3h10c1.1035,0,2,.8965,2,2v6c0,1.1035-.8965,2-2,2h-2.4229s-1.7314,3-1.7314,3l-1.7324-1,2.3096-4h3.5771s0-6,0-6h-10s0,6,0,6h3v2h-3c-1.1035,0-2-.8965-2-2v-6c0-1.1035.8965-2,2-2Z"></path><path class="cls-2" d="m15,30h-2v-5c-.0018-1.6561-1.3439-2.9982-3-3h-4c-1.6561.0018-2.9982,1.3439-3,3v5H1v-5c.0033-2.7601,2.2399-4.9967,5-5h4c2.7601.0033,4.9967,2.2399,5,5v5Z"></path><path class="cls-2" d="m8,10c1.6569,0,3,1.3431,3,3s-1.3431,3-3,3-3-1.3431-3-3c.0019-1.6561,1.3439-2.9981,3-3m0-2c-2.7614,0-5,2.2386-5,5s2.2386,5,5,5,5-2.2386,5-5-2.2386-5-5-5Z"></path></svg>
</div>
<h2 class="dashboard-card-heading">Feedback</h2>
</div>
<div class="flex">
<div data-tippy-content="<p>This tile summarizes the qualitative feedback shared by this contact.</p><p>The metrics shown include:</p><ul><li><strong>Total Comments</strong>: The total number of text comments submitted by this contact</li><li><strong>Unread</strong>: The number of comments that have not yet been reviewed by your team</li><li><strong>Positive</strong>: The number of comments from this contact classified as having a positive sentiment</li><li><strong>Negative</strong>: The number of comments from this contact classified as having a negative sentiment</li></ul><p>Review this contact's comments to better understand their experience, identify areas for improvement, and recognize what's working well.</p>" class="dashboard-tile-help w-embed">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
</div>
</div>
</div>
<div class="dashboard-tile-content">
<div class="w-layout-grid dashboard-tile-grid">
<a href="#" class="dashboard-tile-grid-segment w-inline-block">
<div>{The total number of text comments submitted by this contact}</div>
<div class="dashboard-tile-stat-label">Total Comments</div>
</a>
<a href="#" class="dashboard-tile-grid-segment right w-inline-block">
<div>{The number of comments that have not yet been marked as read}</div>
<div class="dashboard-tile-stat-label">Unread</div>
</a>
<a href="#" class="dashboard-tile-grid-segment bottom w-inline-block">
<div>{The number of comments from this contact classified as having a positive sentiment}</div>
<div class="dashboard-tile-stat-label success-text">Positive</div>
</a>
<a href="#" class="dashboard-tile-grid-segment bottom right w-inline-block">
<div>{The number of comments from this contact classified as having a negative sentiment}</div>
<div class="dashboard-tile-stat-label danger-text">Negative</div>
</a>
</div>
</div>
</div>
<!-- END Feedback Tile -->
<!-- START Advocacy Tile -->
<div id="advocacy" class="dashboard-tile">
<div class="dashboard-card-header">
<div class="dashboard-tile-heading-container">
<div class="icon _20 brand-text w-embed"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="512" height="512" viewbox="0 0 32 32">
<rect x="18" y="26" width="8" height="2"></rect>
<rect x="18" y="22" width="12" height="2"></rect>
<rect x="18" y="18" width="12" height="2"></rect>
<polygon points="20.549 11.217 16 2 11.451 11.217 1.28 12.695 8.64 19.87 6.902 30 14 26.269 14 24.009 9.559 26.344 10.611 20.208 10.789 19.171 10.036 18.438 5.578 14.091 11.739 13.196 12.779 13.045 13.245 12.102 16 6.519 18.755 12.102 19.221 13.045 20.261 13.196 27.715 14.281 28 12.3 20.549 11.217">
</polygon></svg></div>
<h2 class="dashboard-card-heading">Advocacy</h2>
</div>
<div class="flex">
<div data-tippy-content="<p>This tile shows how this contact has actively promoted your organization.</p><p>The metrics shown include:</p><ul><li><strong>Testimonials</strong>: The number of testimonials this contact has submitted that can be used in marketing materials</li><li><strong>Review Link Clicks</strong>: The number of times this contact has clicked links to leave a review on external platforms</li></ul><p>Advocacy is a powerful indicator of individual satisfaction and loyalty. If this contact is actively advocating, it means they're not just satisfied—they're willing to publicly endorse your organization.</p><p>Their advocacy can help drive organic growth and strengthen your reputation.</p>" class="dashboard-tile-help w-embed">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
</div>
</div>
</div>
<div class="dashboard-tile-content">
<div class="w-layout-grid dashboard-tile-grid">
<a href="#" class="dashboard-tile-grid-segment bottom w-inline-block">
<div class="icon _36 w-embed">
<svg fill="currentColor" width="36" height="36" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 58.01 50"><path d="M53,0H5C2.24,0,0,2.24,0,5v33.05c0,2.18,1.77,3.95,3.95,3.95h35.06l11.54,7.83c.17.12.37.17.56.17.16,0,.32-.04.47-.12.33-.17.53-.51.53-.88v-7h1.95c2.18,0,3.95-1.77,3.95-3.95V5c0-2.76-2.24-5-5-5h-.01ZM56,38.05c0,1.07-.87,1.95-1.95,1.95h-2.95c-.55,0-1,.45-1,1v6.11l-10.23-6.94c-.17-.11-.36-.17-.56-.17H3.95c-1.07,0-1.95-.87-1.95-1.95V5c0-1.65,1.35-3,3-3h48c1.65,0,3,1.35,3,3v33.05Z"></path><path d="M7,13h1.63v.41c0,1.08-.92,1.66-1.1,1.76-.31.18-.5.5-.51.86l-.04,2.96c0,.27.1.53.29.72.19.19.44.3.71.3h.06c1.75,0,3.39-.68,4.64-1.91,1.26-1.25,1.95-2.91,1.95-4.69v-6.41c0-.55-.45-1-1-1h-6.63c-.55,0-1,.45-1,1v5c0,.55.45,1,1,1ZM8,8h4.63v5.41c0,1.24-.48,2.4-1.36,3.27-.63.63-1.42,1.05-2.27,1.23l.02-1.33c.85-.66,1.62-1.75,1.62-3.17v-1.41c0-.55-.45-1-1-1h-1.63v-3h-.01ZM51,22h-6.63c-.55,0-1,.45-1,1v5c0,.55.45,1,1,1h1.63v.41c0,1.08-.92,1.66-1.1,1.76-.31.17-.5.5-.51.86l-.04,2.96c0,.27.1.53.29.72s.44.3.71.3h.06c1.75,0,3.39-.68,4.64-1.91,1.26-1.25,1.96-2.91,1.96-4.69v-6.41c0-.55-.45-1-1-1h-.01ZM50,29.41c0,1.24-.48,2.4-1.36,3.26-.63.63-1.42,1.05-2.27,1.23l.02-1.33c.85-.66,1.62-1.75,1.62-3.17v-1.41c0-.55-.45-1-1-1h-1.63v-3h4.63v5.41h0ZM51,11h-31.37c-.55,0-1,.45-1,1s.45,1,1,1h31.37c.55,0,1-.45,1-1s-.45-1-1-1ZM51,17H18.68c-.55,0-1,.45-1,1s.45,1,1,1h32.32c.55,0,1-.45,1-1s-.45-1-1-1ZM38.37,23H7c-.55,0-1,.45-1,1s.45,1,1,1h31.37c.55,0,1-.45,1-1s-.45-1-1-1ZM38.37,29H7c-.55,0-1,.45-1,1s.45,1,1,1h31.37c.55,0,1-.45,1-1s-.45-1-1-1Z"></path></svg>
</div>
<div>{# testimonials ever by this contact}</div>
<div class="dashboard-tile-stat-label">Testimonials</div>
</a>
<a href="#" class="dashboard-tile-grid-segment bottom right w-inline-block">
<div class="icon _36 w-embed">
<svg fill="currentColor" width="36" height="36" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 63.12 46.21"><path d="M7.64,27.65l-.08,2.35c-.02.51.22,1,.64,1.31.27.19.59.29.91.29.18,0,.36-.03.53-.09l2.21-.8,2.2.8c.48.18,1.02.1,1.44-.2.42-.3.65-.79.64-1.31l-.08-2.35,1.44-1.85c.32-.41.41-.94.25-1.43s-.55-.87-1.04-1.01l-2.26-.65-1.31-1.94c-.29-.43-.77-.68-1.28-.68s-.99.25-1.28.68l-1.31,1.94-2.26.65c-.5.14-.89.52-1.04,1.01-.16.49-.06,1.02.25,1.43l1.45,1.85ZM10.17,24.9c.35-.1.65-.32.86-.62l.81-1.19.81,1.19c.2.3.51.52.85.62l1.38.4-.89,1.13c-.22.29-.34.65-.33,1.01l.05,1.44-1.35-.49h0c-.17-.06-.35-.09-.53-.09s-.36.03-.53.09l-1.35.49.05-1.44c.01-.36-.1-.72-.33-1.01l-.89-1.13,1.38-.4ZM20.76,27.65l-.08,2.35c-.02.51.22,1,.64,1.31.27.19.59.29.91.29.18,0,.36-.03.53-.09l2.21-.8,2.21.8c.48.18,1.02.1,1.44-.2.42-.3.65-.79.64-1.31l-.08-2.35,1.44-1.85c.32-.41.41-.94.25-1.43-.16-.49-.55-.87-1.04-1.01l-2.26-.65-1.31-1.94c-.29-.43-.77-.68-1.28-.68s-.99.25-1.28.68l-1.31,1.94-2.26.65c-.49.14-.88.52-1.04,1.01-.16.49-.06,1.02.25,1.43l1.45,1.85ZM23.3,24.9c.35-.1.65-.32.86-.62l.81-1.19.8,1.19c.2.3.51.52.86.62l1.38.4-.89,1.13c-.22.29-.34.65-.33,1.01l.05,1.44-1.35-.49h0c-.17-.06-.35-.09-.53-.09s-.36.03-.53.09l-1.35.49.05-1.44c.01-.36-.1-.72-.33-1.01l-.89-1.13,1.38-.4ZM33.89,27.65l-.08,2.35c-.02.51.22,1,.64,1.31.27.19.59.29.91.29.18,0,.36-.03.53-.09l2.2-.8,2.21.8c.48.18,1.02.1,1.44-.2.42-.3.65-.79.64-1.31l-.08-2.35,1.44-1.85c.32-.41.41-.94.25-1.43-.16-.49-.55-.87-1.04-1.01l-2.26-.65-1.31-1.94c-.29-.43-.77-.68-1.28-.68s-.99.25-1.28.68l-1.31,1.94-2.26.65c-.49.14-.88.52-1.04,1.01-.16.49-.06,1.02.25,1.43l1.45,1.85ZM36.43,24.9c.35-.1.65-.32.86-.62l.81-1.19.81,1.19c.2.3.51.52.86.62l1.38.4-.89,1.13c-.22.29-.34.65-.33,1.01l.05,1.44-1.35-.49h0c-.17-.06-.35-.09-.53-.09s-.36.03-.53.09l-1.35.49.05-1.44c.01-.36-.1-.72-.33-1.01l-.89-1.13,1.38-.4ZM47.08,27.65l-.08,2.35c-.02.51.22,1,.64,1.31.27.19.59.29.91.29.18,0,.36-.03.53-.09l2.21-.8,2.21.8c.48.18,1.02.1,1.44-.2.42-.3.65-.79.64-1.31l-.08-2.35,1.44-1.85c.32-.41.41-.94.25-1.43-.16-.49-.55-.87-1.04-1.01l-2.26-.65-1.31-1.94c-.29-.43-.77-.68-1.28-.68s-1,.25-1.28.68l-1.31,1.94-2.26.65c-.5.14-.89.52-1.04,1.01-.16.49-.06,1.02.25,1.43l1.44,1.85ZM49.62,24.9c.35-.1.65-.32.86-.62l.81-1.19.81,1.19c.2.3.51.52.85.62l1.38.4-.89,1.13c-.22.29-.34.65-.33,1.01l.05,1.44-1.35-.49h0c-.17-.06-.35-.09-.53-.09s-.36.03-.53.09l-1.35.49.05-1.44c.01-.36-.1-.72-.33-1.01l-.89-1.13,1.38-.4ZM59.28,0H3.83C1.72,0,0,1.72,0,3.83v38.54c0,2.11,1.72,3.83,3.83,3.83h55.45c2.11,0,3.83-1.72,3.83-3.83V3.83c0-2.11-1.72-3.83-3.83-3.83ZM60.76,42.37c0,.81-.66,1.47-1.47,1.47H3.83c-.81,0-1.48-.66-1.48-1.47V10.28h58.4v32.09ZM60.76,7.92H2.36V3.83c0-.81.66-1.48,1.48-1.48h55.45c.81,0,1.47.66,1.47,1.48v4.09ZM48.04,4.98c0,.84-.68,1.51-1.51,1.51s-1.51-.68-1.51-1.51.68-1.51,1.51-1.51,1.51.68,1.51,1.51ZM53.16,4.98c0,.84-.68,1.51-1.51,1.51s-1.51-.68-1.51-1.51.68-1.51,1.51-1.51,1.51.68,1.51,1.51ZM58.29,4.98c0,.84-.68,1.51-1.51,1.51s-1.51-.68-1.51-1.51.68-1.51,1.51-1.51,1.51.68,1.51,1.51Z"></path>
</svg>
</div>
<div>{# review link clicks ever by this contact}</div>
<div class="dashboard-tile-stat-label">Review Link Clicks</div>
</a>
</div>
</div>
</div>
<!-- END Advocacy Tile -->
</div>
</div>
<!-- END Overview Tab -->
<!-- START PulseChecks Tab -->
<div data-w-tab="PulseChecks" class="tab-pane w-tab-pane">
<div class="tab-content-container">
<h2>PulseChecks</h2>
<div class="subheading">Review this contact’s PulseCheck responses over time.</div>
<div class="w-layout-grid dashboard-grid">
<!-- START PulseChecks - Repeat for each PulseCheck -->
<div id="pulsecheck-results" class="dashboard-tile quad w-node-_2251bbc4-a657-7601-cfb7-3c03dedc589a-ec28fd42">
<div class="dashboard-card-header">
<div class="dashboard-tile-heading-container">
<div class="icon _20 brand-text w-embed">
<svg fill="currentColor" width="20" height="20" viewbox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M432,272a48.09,48.09,0,0,0-45.25,32H347.53l-28.35-85.06a16,16,0,0,0-30.56.66L244.11,375.36l-52.33-314a16,16,0,0,0-31.3-1.25L99.51,304H48a16,16,0,0,0,0,32h64a16,16,0,0,0,15.52-12.12l45.34-181.37,51.36,308.12A16,16,0,0,0,239.1,464c.3,0,.6,0,.91,0a16,16,0,0,0,15.37-11.6l49.8-174.28,15.64,46.94A16,16,0,0,0,336,336h50.75A48,48,0,1,0,432,272Z"></path></svg>
</div>
<h2 class="dashboard-card-heading">{PulseCheck Name}</h2>
</div>
<!-- START IF Subscribed - show if the contact is still subscribed to this PulseCheck -->
<div class="tag success">Subscribed</div>
<!-- END IF Subscribed -->
<!-- START IF NOT Subscribed - show if the contact is no longer subscribed to this PulseCheck -->
<div class="tag">Not Subscribed</div>
<!-- END IF NOT Subscribed -->
</div>
<div class="table-scroll-container">
<table class="table">
<thead class="table-head">
<tr class="table-header-row no-background">
<th class="vertical-align-bottom">
<div class="table-cell-content">
<div class="table-heading">Period</div>
</div>
</th>
<!-- START Questions - Repeat for each question used by any of the responses (questions could have been added/removed between periods) -->
<th>
<div class="table-cell-content no-minwidth">
<div data-tippy-content="{full question}" class="pulsecheck-table-heading">{Sort question/area name}</div>
</div>
</th>
<!-- END Questions -->
<th>
<div class="table-cell-content no-minwidth">
<div class="pulsecheck-table-heading">
<div>Recommendation Status</div>
<div data-tippy-content="<p>Indicates whether respondents would recommend your organization to others.</p> <p> <span style=color:#2ecc71;font-weight:bold;font-size:18px>●</span> <strong>Promoter:</strong> Highly likely to recommend (9-10 score)<br> <span style=color:#f1c40f;font-weight:bold;font-size:18px>●</span> <strong>Passive:</strong> Satisfied but unenthusiastic (7-8 score)<br> <span style=color:#e74c3c;font-weight:bold;font-size:18px>●</span> <strong>Detractor:</strong> Unlikely to recommend (0-6 score) </p> <p>This classification is based on the Net Promoter Score® methodology, which is widely used to measure customer loyalty and satisfaction.</p>" class="pulsecheck-result-table-heading-help-icon w-embed">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
</div>
</div>
</div>
</th>
<th class="th"></th>
</tr>
</thead>
<tbody class="table-body">
<!-- START PulseCheck Period/Instance - repeat for each period/instance -->
<tr class="table-row">
<td class="table-cell">
<div class="table-cell-content">
<div class="table-data">{Period/Instance name - e.g. Janurary 2025}</div>
</div>
</td>
<!-- START Responses -->
<td class="table-cell">
<div class="table-cell-content no-minwidth">
<div data-pulse-score="100" class="pulsecheck-dot w-embed"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="24" height="24" viewbox="0 0 32 32">
<circle cx="16" cy="16" r="14"></circle>
</svg></div>
</div>
</td>
<!-- END Responses -->
<!-- START NPS Response -->
<!-- Note for NPS Score the score used for Data Pulse Score should be:
NPS 0-6 - data-pulse-score="0"
NPS 7-8 - data-pulse-score="50"
NPS 9-10 - data-pulse-score="100"
Should work this way on main dashboard too.
-->
<td class="table-cell">
<div class="table-cell-content no-minwidth">
<div data-pulse-score="{score based on NPS - see above}" class="pulsecheck-dot w-embed">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="24" height="24" viewbox="0 0 32 32"><circle cx="16" cy="16" r="14"></circle></svg>
</div>
</div>
</td>
<!-- END NPS Response -->
<td class="table-cell">
<div class="table-row-action-button-container">
<div data-pulse-score-past="{pulse score of previous period/instance}" data-pulse-score="{pulse score of this instance}" class="pulsecheck-happiness-score-badge">
<div class="pulsecheck-happiness-score-badge-header">
<div class="icon _12 w-embed">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline></svg>
</div>
<div>Pulse</div>
</div>
<div class="pulsecheck-happiness-score">
<div>0</div>
<div class="icon _16 w-embed">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 24 24" fill="none" stroke="var(--360pulse--trend-no-change)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="1"></circle><circle cx="19" cy="12" r="1"></circle><circle cx="5" cy="12" r="1"></circle></svg>
</div>
</div>
</div>
</div>
</td>
</tr>
<!-- END PulseCheck Period/Instance -->
</tbody>
</table>
</div>
</div>
<!-- END PulseChecks -->
</div>
</div>
</div>
<!-- END PulseChecks Tab -->
<!-- START Feedback Tab -->
<div data-w-tab="Feedback" class="tab-pane w-tab-pane">
<div class="tab-content-container">
<h2>Feedback</h2>
<div class="subheading">Review feedback collected from PulseCheck comments and post-survey follow-ups.</div>
<div class="feedback-list">
<!-- START No Feedback - Show if there's no PulseCheck instances with feedback -->
<div class="block padding-2rem white">
<div class="flex-down center gap-1rem">
<div class="icon-circle-5rem">
<div class="icon _32 brand-color w-embed">
<svg width="32" height="32" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 32 32"><path d="m19,3h10c1.1035,0,2,.8965,2,2v6c0,1.1035-.8965,2-2,2h-2.4229s-1.7314,3-1.7314,3l-1.7324-1,2.3096-4h3.5771s0-6,0-6h-10s0,6,0,6h3v2h-3c-1.1035,0-2-.8965-2-2v-6c0-1.1035.8965-2,2-2Z"></path><path class="cls-2" d="m15,30h-2v-5c-.0018-1.6561-1.3439-2.9982-3-3h-4c-1.6561.0018-2.9982,1.3439-3,3v5H1v-5c.0033-2.7601,2.2399-4.9967,5-5h4c2.7601.0033,4.9967,2.2399,5,5v5Z"></path><path class="cls-2" d="m8,10c1.6569,0,3,1.3431,3,3s-1.3431,3-3,3-3-1.3431-3-3c.0019-1.6561,1.3439-2.9981,3-3m0-2c-2.7614,0-5,2.2386-5,5s2.2386,5,5,5,5-2.2386,5-5-2.2386-5-5-5Z"></path></svg>
</div>
</div>
<h3>No Feedback Yet</h3>
<div>This contact hasn't provided any feedback yet.<br></div>
<a href="{link to /feedback page}" class="button secondary w-inline-block">
<span class="icon _16 w-embed">
<svg fill="currentColor" height="16" width="16" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 32 32"><path d="M26,28H6a2.0027,2.0027,0,0,1-2-2V6A2.0027,2.0027,0,0,1,6,4H16V6H6V26H26V16h2V26A2.0027,2.0027,0,0,1,26,28Z"></path><polygon points="20 2 20 4 26.586 4 18 12.586 19.414 14 28 5.414 28 12 30 12 30 2 20 2"></polygon></svg>
</span>
<span>View All Feedback</span>
</a>
</div>
</div>
<!-- END No Feedback -->
<!-- START PulseCheck Feedback - repeat for each PulseCheck instance for this contact with Feedback -->
<div class="accordion-wrapper">
<div class="accordion-item">
<div style="background-color:rgba(0,0,0,0);color:rgb(97,100,114);border-color:rgb(255,255,255)" class="accordion-header p-1rem">
<div class="flex-down">
<div class="text-1rem">
<div>PulseCheck: <strong>{PulseCheck Name}</strong></div>
</div>
<div class="text-small">
<div class="flex">
<div data-variable-border="true" data-pulse-score="{PulseCheck Pulse Score}" class="pulse-score-small">
<div data-tippy-content="View trend chart" class="icon _16 brand-color w-embed">
<svg fill="currentColor" width="16" height="16" viewbox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M432,272a48.09,48.09,0,0,0-45.25,32H347.53l-28.35-85.06a16,16,0,0,0-30.56.66L244.11,375.36l-52.33-314a16,16,0,0,0-31.3-1.25L99.51,304H48a16,16,0,0,0,0,32h64a16,16,0,0,0,15.52-12.12l45.34-181.37,51.36,308.12A16,16,0,0,0,239.1,464c.3,0,.6,0,.91,0a16,16,0,0,0,15.37-11.6l49.8-174.28,15.64,46.94A16,16,0,0,0,336,336h50.75A48,48,0,1,0,432,272Z"></path>
</svg>
</div>
<div>{PulseCheck Pulse Score}</div>
</div>
<div data-tippy-content="Tuesday, January 3, 2025">{PulseCheck period/instance name - e.g. March 2025}</div>
<div>•</div>
<div data-tippy-content="Tuesday, January 3, 2025">{# of comments} comments</div>
</div>
</div>
</div>
<div class="accordion-icon w-embed">
<svg width="32" height="32" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 32 32">
<polygon points="16,22 6,12 7.4,10.6 16,19.2 24.6,10.6 26,12 ">
</polygon></svg>
</div>
</div>
<div class="accordion-content p-1rem">
<div class="feedback-item-list">
<!-- START General Feedback - Feedback provided on thank-you page -->
<div class="feedback-item">
<div class="block white">
<div class="flex-down full">
<div class="flex full space-between">
<div><strong>General Feedback</strong><br></div>
</div>
<div><em>{Feedback/comment}</em><br></div>
</div>
</div>
</div>
<!-- END General Feedback -->
<!-- START Questions - Repeat for each question from this PulseCheck instance with a comment -->
<div class="feedback-item">
<div class="block white">
<div class="flex full large-gap top">
<!-- START IF Question Answer Positive -->
<div class="icon _24 success-text w-embed">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M8 14s1.5 2 4 2 4-2 4-2"></path><line x1="9" y1="9" x2="9.01" y2="9"></line><line x1="15" y1="9" x2="15.01" y2="9"></line></svg>
</div>
<!-- END IF Question Answer Positive -->
<!-- START IF Question Answer Neutral -->
<div class="icon _24 warning-text w-embed">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M8 14s1.5 2 4 2 4-2 4-2"></path><line x1="9" y1="9" x2="9.01" y2="9"></line><line x1="15" y1="9" x2="15.01" y2="9"></line></svg>
</div>
<!-- END IF Question Answer Neutral -->
<!-- START IF Question Answer Negative -->
<div class="icon _24 danger-text w-embed">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M8 14s1.5 2 4 2 4-2 4-2"></path><line x1="9" y1="9" x2="9.01" y2="9"></line><line x1="15" y1="9" x2="15.01" y2="9"></line></svg>
</div>
<!-- END IF Question Answer Negative -->
<div class="flex-down full mt-3">
<div><strong>{Question}</strong></div>
<div><em>{Feedback/Comment}</em></div>
</div>
</div>
</div>
</div>
<!-- END Questions -->
</div>
</div>
</div>
</div>
<!-- END PulseCheck Feedback -->
</div>
</div>
</div>
<!-- END Feedback Tab -->
<!-- START Testimonials Tab -->
<div data-w-tab="Testimonials" class="tab-pane w-tab-pane">
<div class="tab-content-container">
<h2>Testimonials</h2>
<div class="subheading">Testimonials collected for marketing use.<br></div>
<!-- START Testimonials - If there are one or more testimonials -->
<div class="w-layout-grid dashboard-grid">
<!-- START Testimonial Tile - repeat for each testimonial -->
<div id="pulse-score" class="dashboard-tile">
<div class="dashboard-card-header">
<div class="dashboard-tile-heading-container">
<div class="icon _20 brand-text w-embed">
<svg fill="currentColor" width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 32 32"><path d="M12,15H6.11A9,9,0,0,1,10,8.86l1.79-1.2L10.69,6,8.9,7.2A11,11,0,0,0,4,16.35V23a2,2,0,0,0,2,2h6a2,2,0,0,0,2-2V17A2,2,0,0,0,12,15Z"></path><path d="M26,15H20.11A9,9,0,0,1,24,8.86l1.79-1.2L24.7,6,22.9,7.2A11,11,0,0,0,18,16.35V23a2,2,0,0,0,2,2h6a2,2,0,0,0,2-2V17A2,2,0,0,0,26,15Z"></path></svg>
</div>
<div>From: <strong>{PulseCheck Name}</strong></div>
</div>
<div class="flex">
<!-- START Delete Testimonial button -->
<a href="#" class="w-inline-block">
<div class="icon _16 danger-text w-embed">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg>
</div>
</a>
<!-- END Delete Testimonial button -->
</div>
</div>
<div class="testimonial-container">
<a href="#" class="w-inline-block">
<img alt="{First Name} {Last Name}" src="{avatar url}" loading="lazy" class="testimonial-profile-picture">
</a>
<div><em>"{TESTIMONIAL TEXT}"</em></div>
<div><strong>{First Name} {Last Name} <!-- if title is filled in --> | {job title}</strong></div>
</div>
<div class="dashboard-tile-footer no-gap">
<div class="flex-down full gap-5">
<div class="dropdown-divider-container">
<div class="divider"></div>
</div>
<div class="text-small">
<div class="flex full space-between no-wrap">
<div class="flex small-gap no-wrap">
<div>{Date created e.g. - Mar 28, 2025}</div>
</div>
<!-- START IF Testimonial "Unread" -->
<div class="relative">
<div class="div-block-436">
<button type="button" class="button secondary small w-inline-block">
<span class="icon _16 w-embed">
<svg fill="currentColor" height="16" width="16" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 32 32"><path d="M30.94,15.66A16.69,16.69,0,0,0,16,5,16.69,16.69,0,0,0,1.06,15.66a1,1,0,0,0,0,.68A16.69,16.69,0,0,0,16,27,16.69,16.69,0,0,0,30.94,16.34,1,1,0,0,0,30.94,15.66ZM16,25c-5.3,0-10.9-3.93-12.93-9C5.1,10.93,10.7,7,16,7s10.9,3.93,12.93,9C26.9,21.07,21.3,25,16,25Z" transform="translate(0 0)"></path><path d="M16,10a6,6,0,1,0,6,6A6,6,0,0,0,16,10Zm0,10a4,4,0,1,1,4-4A4,4,0,0,1,16,20Z" transform="translate(0 0)"></path></svg>
</span>
<span>Mark as Seen</span>
</button>
</div>
</div>
<!-- END IF Testimonial "Unread" -->
<!-- START IF Testimonial "Read" -->
<div class="flex small-gap">
<div class="icon _12 w-embed">
<svg fill="currentColor" height="12" width="12" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 32 32"><path d="M30.94,15.66A16.69,16.69,0,0,0,16,5,16.69,16.69,0,0,0,1.06,15.66a1,1,0,0,0,0,.68A16.69,16.69,0,0,0,16,27,16.69,16.69,0,0,0,30.94,16.34,1,1,0,0,0,30.94,15.66ZM16,25c-5.3,0-10.9-3.93-12.93-9C5.1,10.93,10.7,7,16,7s10.9,3.93,12.93,9C26.9,21.07,21.3,25,16,25Z" transform="translate(0 0)"></path><path d="M16,10a6,6,0,1,0,6,6A6,6,0,0,0,16,10Zm0,10a4,4,0,1,1,4-4A4,4,0,0,1,16,20Z" transform="translate(0 0)"></path></svg>
</div>
<div>Viewed {date marked read - e.g. Mar 31, 2025}</div>
</div>
<!-- END IF Testimonial "Read" -->
</div>
</div>
</div>
</div>
</div>
<!-- END Testimonial Tile -->
</div>
<!-- END Testimonials -->
<!-- START No Testimonials - show if there are no testimonials from this contact -->
<div class="block padding-2rem white">
<div class="flex-down center gap-1rem">
<div class="icon-circle-5rem">
<div class="icon _32 brand-color w-embed">
<svg fill="currentColor" width="32" height="32" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 32 32"><path d="M12,15H6.11A9,9,0,0,1,10,8.86l1.79-1.2L10.69,6,8.9,7.2A11,11,0,0,0,4,16.35V23a2,2,0,0,0,2,2h6a2,2,0,0,0,2-2V17A2,2,0,0,0,12,15Z"></path><path d="M26,15H20.11A9,9,0,0,1,24,8.86l1.79-1.2L24.7,6,22.9,7.2A11,11,0,0,0,18,16.35V23a2,2,0,0,0,2,2h6a2,2,0,0,0,2-2V17A2,2,0,0,0,26,15Z"></path></svg>
</div>
</div>
<h3>No Testimonials Yet</h3>
<div>This contact hasn't provided any testimonials yet.</div>
<a href="{link to /testimonials page}" class="button secondary w-inline-block">
<div class="icon _16 w-embed">
<svg fill="currentColor" height="16" width="16" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 32 32"><path d="M26,28H6a2.0027,2.0027,0,0,1-2-2V6A2.0027,2.0027,0,0,1,6,4H16V6H6V26H26V16h2V26A2.0027,2.0027,0,0,1,26,28Z"></path><polygon points="20 2 20 4 26.586 4 18 12.586 19.414 14 28 5.414 28 12 30 12 30 2 20 2"></polygon></svg>
</div>
<div>View All Testimonials</div>
</a>
</div>
</div>
<!-- END No Testimonials -->
</div>
</div>
<!-- END Testimonials Tab -->
<!-- START History Tab -->
<div data-w-tab="History" class="tab-pane w-tab-pane">
<div class="tab-content-container">
<h2>History</h2>
<div class="subheading">Review past PulseCheck responses, reminders, and feedback from this contact.</div>
<div class="history-list flex-down">
<!-- START "Responded to a PulseCheck" History Item -->
<div class="history-item">
<div class="block white">
<div class="flex full large-gap top">
<div class="icon _24 brand-color w-embed">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="29.66" viewbox="0 0 74.62 69.17" stroke="currentColor" fill="none"><g stroke-linecap="round" stroke-linejoin="round" stroke-width="4px"><circle cx="56.62" cy="51.17" r="16"></circle><path d="M63.02,57.57s-2.4-3.2-6.4-3.2-6.4,3.2-6.4,3.2"></path><line x1="51.82" y1="46.37" x2="51.84" y2="46.37"></line><line x1="61.42" y1="46.37" x2="61.44" y2="46.37"></line><circle cx="18" cy="51.17" r="16"></circle><line x1="11.6" y1="55.97" x2="24.4" y2="55.97"></line><line x1="13.2" y1="46.37" x2="13.22" y2="46.37"></line><line x1="22.8" y1="46.37" x2="22.82" y2="46.37"></line><circle cx="37.3" cy="18" r="16"></circle><path d="M30.9,21.2s2.4,3.2,6.4,3.2,6.4-3.2,6.4-3.2"></path><line x1="32.5" y1="13.2" x2="32.52" y2="13.2"></line><line x1="42.1" y1="13.2" x2="42.12" y2="13.2"></line></g></svg>
</div>
<div class="flex-down full">
<div class="flex full space-between">
<div>Responded to a PulseCheck</div>
<div>{Date/Time Responded to PulseCheck - e.g. Mar 28, 2025 1:32pm (stored UTC showin in browsers timezone))</div>
</div>
<div class="block gray-50">
<div class="flex full space-between">
<div class="flex-down">
<div class="flex small-gap">
<div>PulseCheck:</div>
<div><strong>{PulseCheck Name}</strong></div>
</div>
</div>
<div class="flex">
<div>Score:</div>
<div data-variable-border="true" data-pulse-score="{PulseCheck Pulse Score}" class="pulse-score-small">
<div class="icon _16 brand-color w-embed">
<svg fill="currentColor" width="16" height="16" viewbox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
<path d="M432,272a48.09,48.09,0,0,0-45.25,32H347.53l-28.35-85.06a16,16,0,0,0-30.56.66L244.11,375.36l-52.33-314a16,16,0,0,0-31.3-1.25L99.51,304H48a16,16,0,0,0,0,32h64a16,16,0,0,0,15.52-12.12l45.34-181.37,51.36,308.12A16,16,0,0,0,239.1,464c.3,0,.6,0,.91,0a16,16,0,0,0,15.37-11.6l49.8-174.28,15.64,46.94A16,16,0,0,0,336,336h50.75A48,48,0,1,0,432,272Z"></path>
</svg>
</div>
<div>{PulseCheck Pulse Score}</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END "Responded to a PulseCheck" History Item -->
<!-- START PulseCheck Email Tracking History Item -->
<div class="history-item">
<div class="block white">
<div class="flex full large-gap top">
<div class="icon _24 brand-color w-embed">
<svg width="24" height="24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 32 32"><path d="M28,6H4A2,2,0,0,0,2,8V24a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V8A2,2,0,0,0,28,6ZM25.8,8,16,14.78,6.2,8ZM4,24V8.91l11.43,7.91a1,1,0,0,0,1.14,0L28,8.91V24Z" transform="translate(0)"></path></svg>
</div>
<div class="flex-down full">
<div class="flex full space-between">
<div>
<!-- IF Initial PulseCheck Email -->
PulseCheck Invitation Email Sent
<!-- IF First Reminder Email -->
First Reminder Email Sent
<!-- IF Second Reminder Email -->
Second Reminder Email Sent
</div>
<div>{date/time second reminder sent e.g. Mar 28, 2025 4:32pm}</div>
</div>
<div class="block gray-50">
<div class="flex full space-between">
<div class="flex-down">
<div class="flex small-gap">
<div>PulseCheck:</div>
<div><strong>{PulseCheck Name}</strong></div>
</div>
<div class="flex small-gap">
<div>Opened:</div>
<div><strong>{date/time opened if opened - e.g. Mar 25, 2025 10:22am (else "N/A")</strong></div>
</div>
<div class="flex small-gap">
<div>Link to PulseCheck Clicked:</div>
<div><strong>{"Yes" or "No"}</strong></div>
</div>
</div>
<div class="flex">
<!-- START Opened, No Action -->
<div class="tag warn">Opened, No Action</div>
<!-- END Opened, No Action -->
<!-- START Opened & Clicked -->
<div class="tag success">Opened & Clicked</div>
<!-- END Opened & Clicked -->
<!-- START Unopened -->
<div class="tag danger">Unopened</div>
<!-- END Unopened -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END PulseCheck Email Tracking History Item -->
<!-- START "Submitted Testimonial" History Item -->
<div class="history-item">
<div class="block white">
<div class="flex full large-gap top">
<div class="icon _24 brand-color w-embed">
<svg width="32" height="32" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 32 32"><path d="M23,27.1781l-2.59-2.59-1.41,1.4119,4,4,7-7-1.41-1.4119-5.59,5.59ZM14,16h-3v-.1689c0-1.397.7441-2.7114,1.9419-3.4302l1.1416-.6865-1.03-1.7144-1.1404.686c-1.7969,1.0781-2.9131,3.0493-2.9131,5.145v5.1689c0,.5522.4478,1,1,1h4c.5522,0,1-.4478,1-1v-4c0-.5522-.4478-1-1-1h0ZM22,16h-3v-.1689c0-1.397.7441-2.7114,1.9419-3.4302l1.1416-.6865-1.03-1.7144-1.1404.686c-1.7969,1.0781-2.9131,3.0493-2.9131,5.145v5.1689c0,.5522.4478,1,1,1h4c.5522,0,1-.4478,1-1v-4c0-.5522-.4478-1-1-1h0ZM12,28h-6c-1.103,0-2-.8975-2-2V6c0-1.103.897-2,2-2h20c1.1025,0,2,.897,2,2v11h-2V6H6v20h6v2Z"></path></svg>
</div>
<div class="flex-down full">
<div class="flex full space-between">
<div>Submitted Testimonial</div>
<div>{Date/Time Testimonial Saved - e.g. Mar 28, 2025 1:32pm}</div>
</div>
<div class="block gray-50">
<div class="flex full space-between">
<div class="flex-down">
<div class="flex small-gap">
<div><em>"{testimonial text}"</em><br></div>
</div>
</div>
<div class="flex">
<div class="tag success">Testimonial Submitted</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END "Submitted Testimonial" History Item -->
<!-- START "Visited External Review Platform" History Item -->
<div class="history-item">
<div class="block white">
<div class="flex full large-gap top">
<div class="icon _24 brand-color w-embed"><svg width="32" height="32" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 32 32">
<rect x="18" y="26" width="8" height="2"></rect>
<rect x="18" y="22" width="12" height="2"></rect>
<rect x="18" y="18" width="12" height="2"></rect>
<polygon points="20.549 11.217 16 2 11.451 11.217 1.28 12.695 8.64 19.87 6.902 30 14 26.269 14 24.009 9.559 26.344 10.611 20.208 10.789 19.171 10.036 18.438 5.578 14.091 11.739 13.196 12.779 13.045 13.245 12.102 16 6.519 18.755 12.102 19.221 13.045 20.261 13.196 27.715 14.281 28 12.3 20.549 11.217">
</polygon></svg></div>
<div class="flex-down full">
<div class="flex full space-between">
<div>Visited External Review Platform</div>
<div>{Date/Time Link clicked - e.g. Mar 28, 2025 1:32pm}</div>
</div>
<div class="block gray-50">
<div class="flex full space-between">
<div class="flex-down">
<div class="flex small-gap">
<div>Platform:</div>
<div><strong>{platform - e.g. Google}</strong></div>
</div>
</div>
<div class="flex">
<div class="tag info">Platform Clicked</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- START "Visited External Review Platform" History Item -->
</div>
</div>
</div>
<!-- END History Tab -->
<!-- START Settings Tab -->
<div data-w-tab="Settings" class="tab-pane w-tab-pane">
<div data-current="General Settings" data-easing="ease" data-duration-in="300" data-duration-out="100" class="sub-tabs w-tabs">
<div class="sub-tabs-menu w-tab-menu">
<a data-w-tab="General Settings" class="sub-tab-menu-link w-inline-block w-tab-link w--current">
<div class="sub-tab-icon w-embed"><svg width="32" height="32" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 32 32">
<path d="M27,16.76c0-.25,0-.5,0-.76s0-.51,0-.77l1.92-1.68A2,2,0,0,0,29.3,11L26.94,7a2,2,0,0,0-1.73-1,2,2,0,0,0-.64.1l-2.43.82a11.35,11.35,0,0,0-1.31-.75l-.51-2.52a2,2,0,0,0-2-1.61H13.64a2,2,0,0,0-2,1.61l-.51,2.52a11.48,11.48,0,0,0-1.32.75L7.43,6.06A2,2,0,0,0,6.79,6,2,2,0,0,0,5.06,7L2.7,11a2,2,0,0,0,.41,2.51L5,15.24c0,.25,0,.5,0,.76s0,.51,0,.77L3.11,18.45A2,2,0,0,0,2.7,21L5.06,25a2,2,0,0,0,1.73,1,2,2,0,0,0,.64-.1l2.43-.82a11.35,11.35,0,0,0,1.31.75l.51,2.52a2,2,0,0,0,2,1.61h4.72a2,2,0,0,0,2-1.61l.51-2.52a11.48,11.48,0,0,0,1.32-.75l2.42.82a2,2,0,0,0,.64.1,2,2,0,0,0,1.73-1L29.3,21a2,2,0,0,0-.41-2.51ZM25.21,24l-3.43-1.16a8.86,8.86,0,0,1-2.71,1.57L18.36,28H13.64l-.71-3.55a9.36,9.36,0,0,1-2.7-1.57L6.79,24,4.43,20l2.72-2.4a8.9,8.9,0,0,1,0-3.13L4.43,12,6.79,8l3.43,1.16a8.86,8.86,0,0,1,2.71-1.57L13.64,4h4.72l.71,3.55a9.36,9.36,0,0,1,2.7,1.57L25.21,8,27.57,12l-2.72,2.4a8.9,8.9,0,0,1,0,3.13L27.57,20Z" transform="translate(0 0)"></path>
<path d="M16,22a6,6,0,1,1,6-6A5.94,5.94,0,0,1,16,22Zm0-10a3.91,3.91,0,0,0-4,4,3.91,3.91,0,0,0,4,4,3.91,3.91,0,0,0,4-4A3.91,3.91,0,0,0,16,12Z" transform="translate(0 0)"></path>
</svg></div>
<div>General Settings</div>
</a>
<a data-w-tab="PulseChecks" class="sub-tab-menu-link w-inline-block w-tab-link">
<div class="sub-tab-icon w-embed"><svg width="32" height="32" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 32 32">
<path d="M29.707,7.293l-3-3a.9994.9994,0,0,0-1.414,0L16,13.5859V18h4.4141L29.707,8.707A.9994.9994,0,0,0,29.707,7.293ZM19.5859,16H18V14.4141l5-5L24.5859,11ZM26,9.5859,24.4141,8,26,6.4141,27.5859,8Z" transform="translate(0 0)"></path>
<path d="M10,14a4,4,0,1,1,4-4A4.0045,4.0045,0,0,1,10,14Zm0-6a2,2,0,1,0,1.998,2.0044A2.002,2.002,0,0,0,10,8Z" transform="translate(0 0)"></path>
<path d="M27.0059,14.2354l-1.4141,1.414L28,18.0576,18.0579,28,4,13.9414V4h9.9417l4.4067,4.4067,1.4141-1.4145-4.407-4.4063A2,2,0,0,0,13.9414,2H4A2,2,0,0,0,2,4v9.9414a2,2,0,0,0,.5857,1.4141L16.6436,29.4146a2.001,2.001,0,0,0,2.8286,0l9.9424-9.9424a2.001,2.001,0,0,0,0-2.8286Z" transform="translate(0 0)"></path>
</svg></div>
<div>PulseChecks</div>
</a>
<a data-w-tab="Tags" class="sub-tab-menu-link w-inline-block w-tab-link">
<div class="sub-tab-icon w-embed"><svg width="32" height="32" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 32 32">
<path d="M29.707,7.293l-3-3a.9994.9994,0,0,0-1.414,0L16,13.5859V18h4.4141L29.707,8.707A.9994.9994,0,0,0,29.707,7.293ZM19.5859,16H18V14.4141l5-5L24.5859,11ZM26,9.5859,24.4141,8,26,6.4141,27.5859,8Z" transform="translate(0 0)"></path>
<path d="M10,14a4,4,0,1,1,4-4A4.0045,4.0045,0,0,1,10,14Zm0-6a2,2,0,1,0,1.998,2.0044A2.002,2.002,0,0,0,10,8Z" transform="translate(0 0)"></path>
<path d="M27.0059,14.2354l-1.4141,1.414L28,18.0576,18.0579,28,4,13.9414V4h9.9417l4.4067,4.4067,1.4141-1.4145-4.407-4.4063A2,2,0,0,0,13.9414,2H4A2,2,0,0,0,2,4v9.9414a2,2,0,0,0,.5857,1.4141L16.6436,29.4146a2.001,2.001,0,0,0,2.8286,0l9.9424-9.9424a2.001,2.001,0,0,0,0-2.8286Z" transform="translate(0 0)"></path>
</svg></div>
<div>Tags</div>
</a>
</div>
<!-- START Settings Page Sub-tab Content -->
<div class="sub-tab-content w-tab-content">
<div data-w-tab="General Settings" class="sub-tab-content-area w-tab-pane w--tab-active">
<h2>General Settings</h2>
<div class="subheading">This is come example tab content</div>
<form id="contact-settings" name="contact-settings" method="get">
<div class="form-field-container">
<div class="field-label-container">
<label for="profile-image" class="field-label">Profile Picture</label></div>
<div class="profile-image-edit">
<img alt="{first name} {last name}" src="{avatar URL}" loading="lazy" class="profile-image">
<div id="change-image" class="change-image">
<div class="w-embed">
<svg xmlns="http://www.w3.org/2000/svg" height="32" viewbox="0 0 24 24" width="32" fill="currentColor">
<path d="M0 0h24v24H0V0z" fill="none"></path>
<path d="M18 20H4V6h9V4H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-9h-2v9zm-7.79-3.17l-1.96-2.36L5.5 18h11l-3.54-4.71zM20 4V1h-2v3h-3c.01.01 0 2 0 2h3v2.99c.01.01 2 0 2 0V6h3V4h-3z"></path>
</svg>
</div>
</div>
</div>
</div>
<div class="space-2rem"></div>
<div class="w-layout-grid form-grid">
<div class="form-field-container">
<div class="field-label-container">
<label for="first-name" class="field-label">First Name</label>
<div class="required-star">*</div>
</div>
<input class="form-field w-input" maxlength="256" name="first-name" placeholder="First Name" type="text" id="first-name" required="">
</div>
<div class="form-field-container">
<div class="field-label-container">
<label for="last-name" class="field-label">Last Name</label></div>
<input class="form-field w-input" maxlength="256" name="last-name" placeholder="Last Name" type="text" id="last-name">
</div>
<div class="form-field-container">
<div class="field-label-container">
<label for="email" class="field-label">Email Address</label>
<div class="required-star">*</div>
<div data-tippy-content="You must provide an email address for this contact. It will be used to send PulseCheck notifications and communications, so please ensure it's accurate." class="help-tooltip w-embed">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
</div>
</div>
<input class="form-field w-input" maxlength="256" name="email" placeholder="Email Address" type="email" id="email" required="">
</div>
<div class="form-field-container">
<div class="field-label-container">
<label for="job-title" class="field-label">Job Title</label></div>
<input class="form-field w-input" maxlength="256" name="job-title" placeholder="Job Title" type="text" id="job-title">
</div>
<div class="form-field-container">
<div class="field-label-container">
<label for="status" class="field-label">Status</label>
<div data-tippy-content="Your email address is used for login and must be verified before changes can be saved. A verification email will be sent to the provided address with a link to confirm your update." class="help-tooltip w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"></circle>
<path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
<line x1="12" y1="17" x2="12.01" y2="17"></line>
</svg></div>
</div>
<div data-delay="0" data-hover="false" class="dropdown w-dropdown">
<div class="dropdown-closed w-dropdown-toggle">
<div class="dropdown-arrow w-icon-dropdown-toggle"></div>
<div class="dropdown-text">Active</div>
</div>
<div class="dropdown-open w-dropdown-list">
<div class="dropdown-options">
<a href="#" class="dropdown-option w-inline-block">
<div class="dropdown-option-selected-icon-container">
<div class="dropdown-option-selected-icon selected w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round">
<polyline points="20 6 9 17 4 12"></polyline>
</svg></div>
</div>
<div class="dropdown-option-text">Active</div>
</a>
<a href="#" class="dropdown-option w-inline-block">
<div class="dropdown-option-selected-icon-container">
<div class="dropdown-option-selected-icon w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round">
<polyline points="20 6 9 17 4 12"></polyline>
</svg></div>
</div>
<div class="dropdown-option-text">Unsubscribed from all PulseChecks</div> <!-- removes contact from all PulseChecks -->
</a>
</div>
</div>
</div>
</div>
<div class="form-field-container">
<div class="field-label-container">
<label for="language" class="field-label">Language</label>
<div data-tippy-content="This field sets the preferred language for automated PulseCheck emails. Note that the survey will auto-detect the browser's language, respondents can change the survey language during completion, but it will not update this email language setting." class="help-tooltip w-embed">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
</div>
</div>
<div data-delay="0" data-hover="false" class="dropdown w-dropdown">
<div class="dropdown-closed w-dropdown-toggle">
<div class="dropdown-arrow w-icon-dropdown-toggle"></div>
<div class="dropdown-text">{Selected language - should default to en in database}</div>
</div>
<div class="dropdown-open w-dropdown-list">
<div class="dropdown-filter"><input class="dropdown-filter-input w-input" maxlength="256" name="field-2" data-name="Field 2" placeholder="Filter" type="text" id="field-2" required=""></div>
<div class="dropdown-options">
<!-- START Languages - repeat for each language -->
<a href="#" class="dropdown-option w-inline-block">
<div class="dropdown-option-selected-icon-container">
<div class="dropdown-option-selected-icon selected w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round">
<polyline points="20 6 9 17 4 12"></polyline>
</svg></div>
</div>
<div class="dropdown-option-text">English</div>
</a>
<!-- END Languages -->
</div>
</div>
</div>
</div>
</div>
</form>
</div>
<div data-w-tab="PulseChecks" class="sub-tab-content-area w-tab-pane">
<div class="tab-heading-container-for-button">
<div>
<h2>PulseChecks</h2>
<div class="subheading">Add or remove this contact from PulseChecks.</div>
</div>
<div>
<!-- START Add PulseCheck button - opens "Assign to PulseCheck" modal -->
<a href="#" class="button w-inline-block">
<div>Add PulseCheck</div>
</a>
<!-- END Add PulseCheck button -->
</div>
</div>
<form id="manage-pulsechecks" name="manage-pulsechecks" method="get">
<div class="form-list gap-1rem">
<div class="form-field-container">
<div class="field-label-container">
<label for="name" class="field-label">PulseChecks</label>
<div data-tippy-content="Select which PulseChecks this contact should receive. The contact will be included in the next scheduled PulseCheck instance." class="help-tooltip w-embed">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
</div>
</div>
<div class="fancy-option-group">
<!-- START PulseChecks - Repeat for each PulseCheck assigned to the contact -->
<div class="fancy-option white-bg">
<div class="flex full">
<div class="fancy-option-text-container">
<div class="fancy-option-heading">{PulseCheck name}</div>
</div>
<div class="flex">
<!-- START Dashboard Button - Opens the dashboard for this PulseCheck -->
<a data-tippy-content="PulseCheck Dashboard" href="#" class="w-inline-block">
<div class="icon _16 w-embed"><svg width="32" height="32" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 32 32">
<polygon points="4 20 4 22 8.586 22 2 28.586 3.414 30 10 23.414 10 28 12 28 12 20 4 20">
<rect x="24.0001" y="21" width="2" height="5"></rect>
<rect x="20.0001" y="16" width="2" height="10"></rect>
<rect x="16" y="18" width="2" height="8"></rect>
<path d="M28,2H4A2.002,2.002,0,0,0,2,4V16H4V13H28.001l.001,15H16v2H28a2.0027,2.0027,0,0,0,2-2V4A2.0023,2.0023,0,0,0,28,2ZM12,11H4V4h8Zm2,0V4H28l.0007,7Z"></path>
</polygon></svg></div>
</a>
<!-- END Dashboard Button -->
<!-- START Remove Button - Remove the user from this Pulsecheck -->
<a data-tippy-content="Settings" href="../360pulse/pulsechecks-settings.html" class="w-inline-block">
<div class="icon _16 danger-text w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="3 6 5 6 21 6"></polyline>
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
<line x1="10" y1="11" x2="10" y2="17"></line>
<line x1="14" y1="11" x2="14" y2="17"></line>
</svg></div>
</a>
<!-- END Remove Button -->
</div>
</div>
</div>
<!-- END PulseChecks -->
</div>
</div>
</div>
</form>
</div>
<div data-w-tab="Tags" class="sub-tab-content-area w-tab-pane">
<div class="tab-heading-container-for-button">
<div>
<h2>Manage Tags</h2>
<div class="subheading">Add or manage tags for this contact.</div>
</div>
<div>
<a href="#" class="button w-inline-block">
<div>Add a Tag</div>
</a>
</div>
</div>
<form id="tags-form" name="tags-form" method="get">
<div class="form-list gap-1rem">
<div class="form-field-container">
<div class="field-label-container"><label for="name" class="field-label">Assigned Tags</label>
<div data-tippy-content="Assign tags to categorize and organize your contacts. Tags help you filter and segment your audience for reporting and targeted PulseChecks." class="help-tooltip w-embed">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
</div>
</div>
<div class="fancy-option-group">
<!-- START Tag - repeat for each tag -->
<div class="tag-editor">
<div class="flex full">
<div class="fancy-option-text-container">
<div class="fancy-option-heading">{tag name}</div>
</div>
<div class="flex">
<div>
<!-- START IF Tag Type = Text -->
<input class="form-field w15rem w-input" maxlength="256" name="tag_value" placeholder="Enter a value" type="text" id="tag_value" required="">
<!-- END IF Tag Type = Text -->
<!-- START IF Tag Type = Dropdown -->
<div data-delay="0" data-hover="false" class="dropdown w15rem w-dropdown">
<div class="dropdown-closed w-dropdown-toggle">
<div class="dropdown-arrow w-icon-dropdown-toggle"></div>
<div class="dropdown-text">{selected tag value}</div>
</div>
<div class="dropdown-open w-dropdown-list">
<div class="dropdown-options">
<!-- START Tag Dropdown Option - repeat for each option -->
<a href="#" class="dropdown-option w-inline-block">
<div class="dropdown-option-selected-icon-container">
<div class="dropdown-option-selected-icon selected w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round">
<polyline points="20 6 9 17 4 12"></polyline>
</svg></div>
</div>
<div class="dropdown-option-text">{tag dropdopwn option}</div>
</a>
<!-- END Tag Dropdown Option -->
</div>
</div>
</div>
<!-- END IF Tag Type = Dropdown -->
</div>
<!-- START Delete Tag Button - removes tag from contact -->
<a data-tippy-content="Settings" href="../360pulse/pulsechecks-settings.html" class="w-inline-block">
<div class="icon _16 danger-text w-embed">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg>
</div>
</a>
<!-- END Delete Tag Button -->
</div>
</div>
</div>
<!-- END Tag -->
</div>
</div>
</div>
</form>
</div>
</div>
<!-- END Settings Page Sub-tab Content -->
</div>
</div>
<!-- END Settings Tab -->
</div>
<!-- END Tabs Content -->
</div>
</div>
</div>
</div>
<div class="page-footer">
<!-- STANDARD FOOTER -->
</div>
</div>
</section>