Review Platforms (Tab) - Done
2 min
HTML
<div data-w-tab="Review Platforms" class="tab-pane w-tab-pane">
<div class="tab-content-container">
<div class="tab-heading-container-for-button">
<div>
<h2>Review Platforms</h2>
<div class="subheading no-bottom-margin">Configure review platforms to display on the post-survey "Thank You" page for highly satisfied respondents.</div>
</div>
<div>
<a href="#" class="button w-inline-block">
<div>Add Platform</div>
</a>
</div>
</div>
<div class="space-1rem"></div>
<form id="manage-platforms" name="manage-platforms" method="get">
<div class="table-outline">
<div class="table-scroll-container">
<table class="table">
<thead class="table-head">
<tr class="table-header-row">
<th>
<div class="table-cell-content"></div>
</th>
<th>
<div class="table-cell-content">
<div class="table-heading">Platform</div>
</div>
</th>
<th>
<div class="table-cell-content">
<div class="table-heading"><strong>ID/Domain</strong></div>
</div>
</th>
<th>
<div class="table-cell-content">
<div class="table-heading">Preview URL</div>
</div>
</th>
<th>
<div class="table-cell-content">
<div class="table-heading"><strong>Status</strong></div>
</div>
</th>
<th class="action-column _9rem">
<div class="table-header-icon-container">
<a data-tippy-content="Add Platform" 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>
</th>
</tr>
</thead>
<tbody class="table-body">
<!-- START Platform - repeat for each added platform -->
<tr class="table-row">
<td class="table-cell">
<div class="table-cell-content _32px no-right-padding">
<div class="icon _32">
<!-- START Platform SVG -->
<svg id="Google" xmlns="http://www.w3.org/2000/svg" height="32" viewbox="0 0 24 24" width="32"><path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"></path><path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"></path><path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"></path><path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"></path><path d="M1 1h22v22H1z" fill="none"></path></svg>
<!-- END Platform SVG -->
</div>
</div>
</td>
<td class="table-cell">
<div class="table-cell-content">
<div class="table-data">{platform name}</div>
</div>
</td>
<td class="table-cell">
<div class="table-cell-content">
<div class="table-data">{platform ID}</div>
</div>
</td>
<td class="table-cell truncate">
<div class="table-cell-content">
<div class="table-data overflow">{Platform link e.g. https://search.google.com/local/writereview?placeid=ChIJN1t_tDeuEmsRUsoyG83frY4}</div>
<a data-tippy-content="Preview {Platform name e.g. Google} Review URL" href="{platform link with ID variable}" target="_blank">
<div class="icon _16 w-embed">
<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" width="16" height="16" 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>
</a>
</div>
</td>
<td class="table-cell">
<div class="table-cell-content">
<div class="toggle-field-container">
<div data-ix="toggle" data-toggle-state="on" class="toggle-button"></div>
</div>
</div>
</td>
<td class="table-cell">
<div class="table-row-action-button-container">
<div data-tippy-content="Edit" class="table-row-action-button">
<div class="table-row-action-button-icon">
<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"><path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"></path></svg>
</div>
</div>
<div data-tippy-content="Delete" class="table-row-action-button danger">
<div class="table-row-action-button-icon">
<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>
</div>
</div>
</td>
</tr>
<!-- END Platform - DON'T FORGET .last-row on last tr in table -->
</tbody>
</table>
</div>
</div>
</form>
</div>
</div>