Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Call Flow Checklist</title>
- <style>
- body {
- font-family: Arial, sans-serif;
- background-color: #f4f4f9;
- margin: 0;
- padding: 20px;
- }
- .container {
- max-width: 800px;
- margin: 0 auto;
- background: #fff;
- padding: 20px;
- box-shadow: 0 0 10px rgba(0,0,0,0.1);
- border-radius: 8px;
- }
- .step {
- margin-bottom: 20px;
- }
- .step h2 {
- background: #007BFF;
- color: #fff;
- padding: 10px;
- border-radius: 4px;
- cursor: pointer;
- }
- .substeps {
- margin-left: 20px;
- }
- .substep {
- display: flex;
- align-items: center;
- margin: 10px 0;
- flex-direction: column;
- align-items: flex-start;
- }
- .substep-content {
- display: flex;
- align-items: center;
- width: 100%;
- }
- .check-box, .skip-box {
- width: 20px;
- height: 20px;
- border: 2px solid #007BFF;
- border-radius: 4px;
- margin-right: 10px;
- cursor: pointer;
- transition: background-color 0.3s;
- }
- .check-box.checked {
- background-color: #28a745;
- }
- .skip-box {
- opacity: 0;
- transition: opacity 0.3s;
- }
- .skip-box.checked {
- background-color: #ffc107;
- }
- .details {
- display: none;
- margin-left: 30px;
- font-size: 14px;
- color: #555;
- margin-top: 10px;
- }
- .arrow {
- cursor: pointer;
- margin-left: 5px;
- transition: transform 0.3s;
- }
- .arrow.expanded {
- transform: rotate(90deg);
- }
- .clear-button {
- display: block;
- margin: 20px auto;
- padding: 10px 20px;
- background-color: #dc3545;
- color: #fff;
- border: none;
- border-radius: 4px;
- cursor: pointer;
- font-size: 16px;
- text-align: center;
- }
- .clear-button:hover {
- background-color: #c82333;
- }
- </style>
- </head>
- <body>
- <div class="container" id="checklistContainer"></div>
- <button class="clear-button" id="clearButton">Clear</button>
- <script>
- document.addEventListener('DOMContentLoaded', function() {
- const data = {
- steps: [
- {
- name: "Opening",
- substeps: [
- {
- name: "Confirm Name",
- details: "Verify the customer's full name to ensure you're speaking with the correct person.",
- required: 1
- },
- {
- name: "Introduce Self & Company",
- details: "Introduce yourself and the company you represent.",
- required: 1
- },
- {
- name: "Mini Miranda",
- details: "Provide the required Mini Miranda statement.",
- required: 1
- },
- {
- name: "Warm Welcome",
- details: "Give a friendly welcome.",
- required: 1
- }
- ]
- },
- {
- name: "State Reason for the Call",
- substeps: [
- {
- name: "Provide Delinquency Info",
- details: "Inform the customer about their delinquency status.",
- required: 1
- }
- ]
- },
- {
- name: "Facts on the Table",
- substeps: [
- {
- name: "Can you pay that today?",
- details: "Ask the customer if they can make the payment today.",
- required: 1
- },
- {
- name: "How much can you pay today?",
- details: "If the customer can't pay the full amount, ask how much they can pay today.",
- required: 0
- },
- {
- name: "When can you pay?",
- details: "If the customer can't pay today, ask when they can make a payment.",
- required: 0
- }
- ]
- },
- {
- name: "APT",
- substeps: [
- {
- name: "Acknowledge Statement",
- details: "Acknowledge the customer's statements.",
- required: 1
- },
- {
- name: "Transition into negotiations using WIIFM",
- details: "Use 'What's In It For Me' statements.",
- required: 1
- }
- ]
- },
- {
- name: "Negotiation",
- substeps: [
- {
- name: "Discover Sources of Income",
- details: "Ask about the customer's sources of income.",
- required: 0
- },
- {
- name: "Ask for Alternate Sources of Income",
- details: "Inquire about any alternate sources of income.",
- required: 0
- },
- {
- name: "Raise Initial Payment Offered",
- details: "Encourage the customer to increase the payment amount.",
- required: 0
- },
- {
- name: "Provide Additional WIIFMs",
- details: "Offer additional 'What's In It For Me' benefits.",
- required: 1
- }
- ]
- },
- {
- name: "Challenge Tentative Voice",
- substeps: [
- {
- name: "Challenge Tentative Voice",
- details: "Identify and address any hesitation.",
- required: 0
- }
- ]
- },
- {
- name: "Acknowledge Broke Promises",
- substeps: [
- {
- name: "Acknowledge Broke Promises",
- details: "Address previous broken promises.",
- required: 0
- }
- ]
- },
- {
- name: "Recap",
- substeps: [
- {
- name: "Arrangements Made on the Call",
- details: "Summarize any payment arrangements made.",
- required: 0
- },
- {
- name: "Upcoming Payment",
- details: "Confirm the details of the next scheduled payment.",
- required: 0
- },
- {
- name: "Confirm Demographics",
- details: "Verify the customer's contact information.",
- required: 1
- },
- {
- name: "State Mission",
- details: "Restate the mission or goal of the call.",
- required: 0
- }
- ]
- },
- {
- name: "Closing",
- substeps: [
- {
- name: "State Agent Name",
- details: "Provide your name again.",
- required: 1
- },
- {
- name: "State Company Name",
- details: "Mention the company name.",
- required: 1
- },
- {
- name: "Warm Closing",
- details: "End the call on a friendly note.",
- required: 1
- }
- ]
- }
- ]
- };
- function generateChecklist(data) {
- const container = document.getElementById('checklistContainer');
- data.steps.forEach(step => {
- const stepDiv = document.createElement('div');
- stepDiv.className = 'step';
- const stepHeader = document.createElement('h2');
- stepHeader.textContent = step.name;
- stepHeader.addEventListener('click', () => {
- substepsDiv.style.display = substepsDiv.style.display === 'block' ? 'none' : 'block';
- });
- const substepsDiv = document.createElement('div');
- substepsDiv.className = 'substeps';
- step.substeps.forEach(substep => {
- const substepDiv = document.createElement('div');
- substepDiv.className = 'substep';
- const substepContent = document.createElement('div');
- substepContent.className = 'substep-content';
- const checkBox = document.createElement('div');
- checkBox.className = 'check-box';
- checkBox.addEventListener('click', () => {
- checkBox.classList.toggle('checked');
- if (checkBox.classList.contains('checked') && substep.required === 0) {
- skipBox.classList.remove('checked');
- }
- });
- const substepName = document.createElement('span');
- substepName.textContent = substep.name;
- const arrow = document.createElement('span');
- arrow.className = 'arrow';
- arrow.innerHTML = '▶';
- arrow.addEventListener('click', () => {
- detailsDiv.style.display = detailsDiv.style.display === 'block' ? 'none' : 'block';
- arrow.classList.toggle('expanded');
- });
- substepContent.appendChild(checkBox);
- const skipBox = document.createElement('div');
- skipBox.className = 'skip-box';
- skipBox.style.opacity = substep.required === 1 ? '0' : '1';
- skipBox.addEventListener('click', () => {
- if (!checkBox.classList.contains('checked')) {
- skipBox.classList.toggle('checked');
- }
- });
- substepContent.appendChild(skipBox);
- substepContent.appendChild(substepName);
- substepContent.appendChild(arrow);
- const detailsDiv = document.createElement('div');
- detailsDiv.className = 'details';
- detailsDiv.textContent = substep.details;
- substepDiv.appendChild(substepContent);
- substepDiv.appendChild(detailsDiv);
- substepsDiv.appendChild(substepDiv);
- });
- stepDiv.appendChild(stepHeader);
- stepDiv.appendChild(substepsDiv);
- container.appendChild(stepDiv);
- });
- }
- generateChecklist(data);
- document.getElementById('clearButton').addEventListener('click', () => {
- const checkboxes = document.querySelectorAll('.check-box, .skip-box');
- checkboxes.forEach(box => {
- box.classList.remove('checked');
- });
- const details = document.querySelectorAll('.details');
- details.forEach(detail => {
- detail.style.display = 'none';
- });
- const arrows = document.querySelectorAll('.arrow');
- arrows.forEach(arrow => {
- arrow.classList.remove('expanded');
- });
- });
- });
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement