Audience (Tab)
1 min
<div data-w-tab="Audience" class="tab-pane w-tab-pane">
<form id="audience-filter" name="audience-filter" method="get">
<div class="table-outline">
<div class="table-scroll-container">
<table class="table">
<thead class="table-head">
<tr class="table-header-row">
<th class="table-checkbox-column">
<label class="w-checkbox table-checkbox-field">
<div class="w-checkbox-input w-checkbox-input--inputType-custom table-checkbox"></div>
<input type="checkbox" name="" data-name="" style="opacity:0;position:absolute;z-index:-1">
</label>
</th>
<th>
<div class="table-cell-content">
<div class="table-heading">Name</div>
<div class="table-sort-button w-embed"><svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewbox="0 0 32 32">
<defs>
<style>.cls-1{fill:none;}</style>
</defs>
<polygon points="16 28 9 21 10.41 19.59 16 25.17 21.59 19.59 23 21 16 28">
<polygon points="16 4 23 11 21.59 12.41 16 6.83 10.41 12.41 9 11 16 4">
<rect id="Transparent_Rectangle" data-name="Transparent Rectangle" class="cls-1"></rect>
</polygon></polygon></svg></div>
</div>
</th>
<th>
<div class="table-cell-content">
<div class="table-heading">Email</div>
<div class="table-sort-button w-embed"><svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewbox="0 0 32 32">
<defs>
<style>.cls-1{fill:none;}</style>
</defs>
<title>chevron--sort</title>
<polygon points="16 28 9 21 10.41 19.59 16 25.17 21.59 19.59 23 21 16 28">
<polygon points="16 4 23 11 21.59 12.41 16 6.83 10.41 12.41 9 11 16 4">
<rect id="_Transparent_Rectangle_" data-name="<Transparent Rectangle>" class="cls-1"></rect>
</polygon></polygon></svg></div>
</div>
</th>
<th>
<div class="table-cell-content">
<div class="table-heading">Responses</div>
<div class="table-sort-button w-embed"><svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewbox="0 0 32 32">
<defs>
<style>.cls-1{fill:none;}</style>
</defs>
<title>chevron--sort</title>
<polygon points="16 28 9 21 10.41 19.59 16 25.17 21.59 19.59 23 21 16 28">
<polygon points="16 4 23 11 21.59 12.41 16 6.83 10.41 12.41 9 11 16 4">
<rect id="_Transparent_Rectangle_" data-name="<Transparent Rectangle>" class="cls-1"></rect>
</polygon></polygon></svg></div>
</div>
</th>
<th>
<div class="table-cell-content">
<div class="table-heading">Latest Pulse</div>
<div class="table-sort-button w-embed"><svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewbox="0 0 32 32">
<defs>
<style>.cls-1{fill:none;}</style>
</defs>
<title>chevron--sort</title>
<polygon points="16 28 9 21 10.41 19.59 16 25.17 21.59 19.59 23 21 16 28">
<polygon points="16 4 23 11 21.59 12.41 16 6.83 10.41 12.41 9 11 16 4">
<rect id="_Transparent_Rectangle_" data-name="<Transparent Rectangle>" class="cls-1"></rect>
</polygon></polygon></svg></div>
</div>
</th>
<th>
<div class="table-cell-content">
<div class="table-heading">Net Promoter Segment</div>
<div class="table-sort-button w-embed"><svg version="1.1" fill="currentColor" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="32px" height="32px" viewbox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
<style type="text/css"> .st0{fill:none;}</style>
<polygon points="16,28 9,21 10.4,19.6 16,25.2 21.6,19.6 23,21 ">
<rect id="Transparent_Rectangle" class="st0" width="32" height="32"></rect>
</polygon></svg></div>
</div>
</th>
<th class="action-column">
<div class="table-header-icon-container">
<a href="#" class="table-header-button w-inline-block">
<div class="table-button-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="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus">
<line x1="12" y1="5" x2="12" y2="19"></line>
<line x1="5" y1="12" x2="19" y2="12"></line>
</svg></div>
</a>
<div data-delay="0" data-hover="false" class="table-menu-container w-dropdown">
<div class="table-menu-button w-dropdown-toggle"> <!-- Opens Add Contact Modal -->
<div class="table-header-button">
<div class="table-button-icon w-embed"><svg version="1.1" fill="currentColor" xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewbox="0 0 32 32">
<circle cx="16" cy="8" r="2"></circle>
<circle cx="16" cy="16" r="2"></circle>
<circle cx="16" cy="24" r="2"></circle>
</svg></div>
</div>
</div>
<nav class="table-menu w-dropdown-list">
<a href="#" class="table-menu-item w-inline-block">
<div class="table-menu-item-icon w-embed"><svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewbox="0 0 32 32">
<polygon points="32 14 28 14 28 10 26 10 26 14 22 14 22 16 26 16 26 20 28 20 28 16 32 16 32 14">
<path d="M12,4A5,5,0,1,1,7,9a5,5,0,0,1,5-5m0-2a7,7,0,1,0,7,7A7,7,0,0,0,12,2Z" transform="translate(0 0)"></path>
<path d="M22,30H20V25a5,5,0,0,0-5-5H9a5,5,0,0,0-5,5v5H2V25a7,7,0,0,1,7-7h6a7,7,0,0,1,7,7Z" transform="translate(0 0)"></path>
</polygon></svg></div>
<div>Add Existing Contact</div>
</a>
<a href="#" class="table-menu-item w-inline-block">
<div class="table-menu-item-icon w-embed"><svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewbox="0 0 32 32">
<polygon points="32 14 28 14 28 10 26 10 26 14 22 14 22 16 26 16 26 20 28 20 28 16 32 16 32 14">
<path d="M12,4A5,5,0,1,1,7,9a5,5,0,0,1,5-5m0-2a7,7,0,1,0,7,7A7,7,0,0,0,12,2Z" transform="translate(0 0)"></path>
<path d="M22,30H20V25a5,5,0,0,0-5-5H9a5,5,0,0,0-5,5v5H2V25a7,7,0,0,1,7-7h6a7,7,0,0,1,7,7Z" transform="translate(0 0)"></path>
</polygon></svg></div>
<div>Add New Contact</div>
</a>
<a href="#" class="table-menu-item w-inline-block">
<div class="table-menu-item-icon w-embed"><svg width="32" height="32" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 32 32">
<path d="M16,4c6.6,0,12,5.4,12,12s-5.4,12-12,12S4,22.6,4,16S9.4,4,16,4 M16,2C8.3,2,2,8.3,2,16s6.3,14,14,14s14-6.3,14-14S23.7,2,16,2z"></path>
<rect x="8" y="15" width="16" height="2"></rect>
</svg></div>
<div class="table-menu-item-text">Remove Selected</div>
</a>
<div class="divider"></div>
<a href="#" class="table-menu-item w-inline-block">
<div class="table-menu-item-icon w-embed"><svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewbox="0 0 32 32">
<polygon points="6 18 7.41 19.41 15 11.83 15 30 17 30 17 11.83 24.59 19.41 26 18 16 8 6 18">
<path d="M6,8V4H26V8h2V4a2,2,0,0,0-2-2H6A2,2,0,0,0,4,4V8Z"></path>
</polygon></svg></div>
<div>Import CSV</div>
</a>
<a href="#" class="table-menu-item w-inline-block">
<div class="table-menu-item-icon w-embed"><svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewbox="0 0 32 32">
<polygon points="5 18 5 20 10.586 20 3 27.586 4.414 29 12 21.414 12 27 14 27 14 18 5 18">
<path d="M27,3H5A2,2,0,0,0,3,5V15H5V11H15v4h2V11H27v7H17v2H27v7H17v2H27a2,2,0,0,0,2-2V5A2,2,0,0,0,27,3Zm0,6H5V5H27Z"></path>
</polygon></svg></div>
<div>Export CSV</div>
</a>
</nav>
</div>
</div>
</th>
</tr>
<tr class="table-filter-row">
<th class="table-checkbox-column"> </th>
<th>
<div class="table-filter-cell-content"><input class="input-filter w-input" maxlength="256" name="Filter-Name" placeholder="Filter" type="text" id="Filter-Name"></div>
</th>
<th>
<div class="table-filter-cell-content"><input class="input-filter w-input" maxlength="256" name="Filter-Email" placeholder="Filter" type="text" id="Filter-Email"></div>
</th>
<th>
<div class="table-filter-cell-content">
<div> </div>
</div>
</th>
<th>
<div class="table-filter-cell-content">
<div> </div>
</div>
</th>
<th>
<div class="table-filter-cell-content">
<div data-hover="false" data-delay="0" class="dropdown w-dropdown">
<div class="dropdown-closed table-filter w-dropdown-toggle">
<div class="filter-dropdown-arrow w-icon-dropdown-toggle"></div>
<div class="dropdown-text-content">All</div>
</div>
<nav class="dropdown-open right w-dropdown-list">
<div class="dropdown-option-container">
<a href="#" class="dropdown-option-simple 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" class="feather feather-check">
<polyline points="20 6 9 17 4 12"></polyline>
</svg></div>
</div>
<div class="dropdown-option-text">All Statuses</div>
</a>
<a href="#" class="dropdown-option-simple 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" class="feather feather-check">
<polyline points="20 6 9 17 4 12"></polyline>
</svg></div>
</div>
<div class="dropdown-option-text">Promoters</div>
</a>
<a href="#" class="dropdown-option-simple 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" class="feather feather-check">
<polyline points="20 6 9 17 4 12"></polyline>
</svg></div>
</div>
<div class="dropdown-option-text">Passives</div>
</a>
<a href="#" class="dropdown-option-simple 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" class="feather feather-check">
<polyline points="20 6 9 17 4 12"></polyline>
</svg></div>
</div>
<div class="dropdown-option-text">Detractors</div>
</a>
</div>
</nav>
</div>
</div>
</th>
<th class="action-column"> </th>
</tr>
</thead>
<tbody class="table-body">
<!-- START Contact - repeat for each Contact added to PulseCheck -->
<tr class="table-row">
<td class="table-checkbox-column"><label class="w-checkbox table-checkbox-field">
<div class="w-checkbox-input w-checkbox-input--inputType-custom table-checkbox"></div><input type="checkbox" name="" data-name="" style="opacity:0;position:absolute;z-index:-1">
</label></td>
<td class="table-cell">
<div class="table-cell-content">
<div class="table-data">{First Name} {Last Name}</div>
</div>
</td>
<td class="table-cell">
<div class="table-cell-content">
<div class="table-data">{email address}</div>
</div>
</td>
<td class="table-cell">
<div class="table-cell-content">
<div class="table-data">{# of responses to this PulseCheck}</div>
</div>
</td>
<td class="table-cell">
<div class="table-cell-content">
<div data-variable-border="true" data-pulse-score="{Pulse score from latest PulseCheck}" 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>{Pulse score from latest instance of this PulseCheck}</div>
</div>
</div>
</td>
<td class="table-cell">
<div class="table-cell-content">
<div class="table-data {add appropriate color class - success (promoter), warn (passive), danger (Detractor)">{NPS segment baed on NPS question score from latest instance of this PulseCheck - Promoter (score 9–10), Passive (score 7–8), Detractor (score 0–6)
These are unhappy customers }Promoter</div>
</div>
</td>
<td class="action-column">
<div class="table-row-action-button-container">
<div data-tippy-content="Contact Details" class="table-row-action-button">
<div class="table-row-action-button-icon 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>
</div>
<div data-tippy-content="Remove" class="table-row-action-button">
<div class="table-row-action-button-icon delete w-embed"><svg width="32" height="32" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 32 32">
<path d="M16,4c6.6,0,12,5.4,12,12s-5.4,12-12,12S4,22.6,4,16S9.4,4,16,4 M16,2C8.3,2,2,8.3,2,16s6.3,14,14,14s14-6.3,14-14S23.7,2,16,2z"></path>
<rect x="8" y="15" width="16" height="2"></rect>
</svg></div>
</div>
</div>
</td>
</tr>
<!-- END Contact -->
</tbody>
</table>
</div>
<div class="table-pagination">
<div class="pagination-left">
<div class="items-per-page-container">
<div>Items per page:</div>
<div data-hover="false" data-delay="0" class="dropdown w-dropdown">
<div class="dropdown-closed table-filter w-dropdown-toggle">
<div class="filter-dropdown-arrow w-icon-dropdown-toggle"></div>
<div class="dropdown-text-content">10</div>
</div>
<nav class="dropdown-open top-left w-dropdown-list">
<div class="dropdown-option-container">
<a href="#" class="dropdown-option-simple 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="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check">
<polyline points="20 6 9 17 4 12"></polyline>
</svg></div>
</div>
<div class="dropdown-option-text">10</div>
</a>
<a href="#" class="dropdown-option-simple 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" class="feather feather-check">
<polyline points="20 6 9 17 4 12"></polyline>
</svg></div>
</div>
<div class="dropdown-option-text">25</div>
</a>
<a href="#" class="dropdown-option-simple 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" class="feather feather-check">
<polyline points="20 6 9 17 4 12"></polyline>
</svg></div>
</div>
<div class="dropdown-option-text">50</div>
</a>
<a href="#" class="dropdown-option-simple 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" class="feather feather-check">
<polyline points="20 6 9 17 4 12"></polyline>
</svg></div>
</div>
<div class="dropdown-option-text">100</div>
</a>
</div>
</nav>
</div>
</div>
<div class="paginaton-total-items">
<div>1–10 of 103 items<br></div>
</div>
</div>
<div class="pagination-right">
<div class="pagination-pages-dropdown">
<div data-hover="false" data-delay="0" class="dropdown w-dropdown">
<div class="dropdown-closed table-filter w-dropdown-toggle">
<div class="filter-dropdown-arrow w-icon-dropdown-toggle"></div>
<div class="dropdown-text-content">#</div>
</div>
<nav class="dropdown-open w-dropdown-list">
<div class="dropdown-option-container">
<a href="#" class="dropdown-option-simple 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="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check">
<polyline points="20 6 9 17 4 12"></polyline>
</svg></div>
</div>
<div class="dropdown-option-text">1</div>
</a>
<a href="#" class="dropdown-option-simple 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" class="feather feather-check">
<polyline points="20 6 9 17 4 12"></polyline>
</svg></div>
</div>
<div class="dropdown-option-text">2</div>
</a>
<a href="#" class="dropdown-option-simple 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" class="feather feather-check">
<polyline points="20 6 9 17 4 12"></polyline>
</svg></div>
</div>
<div class="dropdown-option-text">3</div>
</a>
<a href="#" class="dropdown-option-simple 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" class="feather feather-check">
<polyline points="20 6 9 17 4 12"></polyline>
</svg></div>
</div>
<div class="dropdown-option-text">3</div>
</a>
</div>
</nav>
</div>
<div>of 11 pages</div>
</div>
<div class="pagination-button">
<div class="pagination-icon w-embed"><svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewbox="0 0 32 32" xml:space="preserve">
<polygon points="20,24 10,16 20,8 ">
</polygon></svg></div>
</div>
<div class="pagination-button">
<div class="pagination-icon w-embed"><svg version="1.1" fill="currentColor" xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewbox="0 0 32 32" xml:space="preserve">
<polygon points="12,8 22,16 12,24 ">
</polygon></svg></div>
</div>
</div>
</div>
</div>
</form>
</div>