API tools faq
paste
Advertisement
OsverDev

Call Flow

OsverDev
Jul 16th, 2024 (edited)
75
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 14.41 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Call Flow Checklist</title>
  7.     <style>
  8.         body {
  9.             font-family: Arial, sans-serif;
  10.             background-color: #f4f4f9;
  11.             margin: 0;
  12.             padding: 20px;
  13.         }
  14.         .container {
  15.             max-width: 800px;
  16.             margin: 0 auto;
  17.             background: #fff;
  18.             padding: 20px;
  19.             box-shadow: 0 0 10px rgba(0,0,0,0.1);
  20.             border-radius: 8px;
  21.         }
  22.         .step {
  23.             margin-bottom: 20px;
  24.         }
  25.         .step h2 {
  26.             background: #007BFF;
  27.             color: #fff;
  28.             padding: 10px;
  29.             border-radius: 4px;
  30.             cursor: pointer;
  31.         }
  32.         .substeps {
  33.             margin-left: 20px;
  34.         }
  35.         .substep {
  36.             display: flex;
  37.             align-items: center;
  38.             margin: 10px 0;
  39.             flex-direction: column;
  40.             align-items: flex-start;
  41.         }
  42.         .substep-content {
  43.             display: flex;
  44.             align-items: center;
  45.             width: 100%;
  46.         }
  47.         .check-box, .skip-box {
  48.             width: 20px;
  49.             height: 20px;
  50.             border: 2px solid #007BFF;
  51.             border-radius: 4px;
  52.             margin-right: 10px;
  53.             cursor: pointer;
  54.             transition: background-color 0.3s;
  55.         }
  56.         .check-box.checked {
  57.             background-color: #28a745;
  58.         }
  59.         .skip-box {
  60.             opacity: 0;
  61.             transition: opacity 0.3s;
  62.         }
  63.         .skip-box.checked {
  64.             background-color: #ffc107;
  65.         }
  66.         .details {
  67.             display: none;
  68.             margin-left: 30px;
  69.             font-size: 14px;
  70.             color: #555;
  71.             margin-top: 10px;
  72.         }
  73.         .arrow {
  74.             cursor: pointer;
  75.             margin-left: 5px;
  76.             transition: transform 0.3s;
  77.         }
  78.         .arrow.expanded {
  79.             transform: rotate(90deg);
  80.         }
  81.         .clear-button {
  82.             display: block;
  83.             margin: 20px auto;
  84.             padding: 10px 20px;
  85.             background-color: #dc3545;
  86.             color: #fff;
  87.             border: none;
  88.             border-radius: 4px;
  89.             cursor: pointer;
  90.             font-size: 16px;
  91.             text-align: center;
  92.         }
  93.         .clear-button:hover {
  94.             background-color: #c82333;
  95.         }
  96.     </style>
  97. </head>
  98. <body>
  99.     <div class="container" id="checklistContainer"></div>
  100.     <button class="clear-button" id="clearButton">Clear</button>
  101.  
  102.     <script>
  103.         document.addEventListener('DOMContentLoaded', function() {
  104.             const data = {
  105.                 steps: [
  106.                     {
  107.                         name: "Opening",
  108.                         substeps: [
  109.                             {
  110.                                 name: "Confirm Name",
  111.                                 details: "Verify the customer's full name to ensure you're speaking with the correct person.",
  112.                                 required: 1
  113.                             },
  114.                             {
  115.                                 name: "Introduce Self & Company",
  116.                                details: "Introduce yourself and the company you represent.",
  117.                                required: 1
  118.                            },
  119.                            {
  120.                                name: "Mini Miranda",
  121.                                details: "Provide the required Mini Miranda statement.",
  122.                                required: 1
  123.                            },
  124.                            {
  125.                                name: "Warm Welcome",
  126.                                details: "Give a friendly welcome.",
  127.                                required: 1
  128.                            }
  129.                        ]
  130.                    },
  131.                    {
  132.                        name: "State Reason for the Call",
  133.                        substeps: [
  134.                            {
  135.                                name: "Provide Delinquency Info",
  136.                                details: "Inform the customer about their delinquency status.",
  137.                                required: 1
  138.                            }
  139.                        ]
  140.                    },
  141.                    {
  142.                        name: "Facts on the Table",
  143.                        substeps: [
  144.                            {
  145.                                name: "Can you pay that today?",
  146.                                details: "Ask the customer if they can make the payment today.",
  147.                                required: 1
  148.                            },
  149.                            {
  150.                                name: "How much can you pay today?",
  151.                                details: "If the customer can't pay the full amount, ask how much they can pay today.",
  152.                                required: 0
  153.                            },
  154.                            {
  155.                                name: "When can you pay?",
  156.                                details: "If the customer can't pay today, ask when they can make a payment.",
  157.                                required: 0
  158.                            }
  159.                        ]
  160.                    },
  161.                    {
  162.                        name: "APT",
  163.                        substeps: [
  164.                            {
  165.                                name: "Acknowledge Statement",
  166.                                details: "Acknowledge the customer's statements.",
  167.                                required: 1
  168.                            },
  169.                            {
  170.                                name: "Transition into negotiations using WIIFM",
  171.                                details: "Use 'What's In It For Me' statements.",
  172.                                required: 1
  173.                            }
  174.                        ]
  175.                    },
  176.                    {
  177.                        name: "Negotiation",
  178.                        substeps: [
  179.                            {
  180.                                name: "Discover Sources of Income",
  181.                                details: "Ask about the customer's sources of income.",
  182.                                required: 0
  183.                            },
  184.                            {
  185.                                name: "Ask for Alternate Sources of Income",
  186.                                details: "Inquire about any alternate sources of income.",
  187.                                required: 0
  188.                            },
  189.                            {
  190.                                name: "Raise Initial Payment Offered",
  191.                                details: "Encourage the customer to increase the payment amount.",
  192.                                required: 0
  193.                            },
  194.                            {
  195.                                name: "Provide Additional WIIFMs",
  196.                                details: "Offer additional 'What's In It For Me' benefits.",
  197.                                required: 1
  198.                            }
  199.                        ]
  200.                    },
  201.                    {
  202.                        name: "Challenge Tentative Voice",
  203.                        substeps: [
  204.                            {
  205.                                name: "Challenge Tentative Voice",
  206.                                details: "Identify and address any hesitation.",
  207.                                required: 0
  208.                            }
  209.                        ]
  210.                    },
  211.                    {
  212.                        name: "Acknowledge Broke Promises",
  213.                        substeps: [
  214.                            {
  215.                                name: "Acknowledge Broke Promises",
  216.                                details: "Address previous broken promises.",
  217.                                required: 0
  218.                            }
  219.                        ]
  220.                    },
  221.                    {
  222.                        name: "Recap",
  223.                        substeps: [
  224.                            {
  225.                                name: "Arrangements Made on the Call",
  226.                                details: "Summarize any payment arrangements made.",
  227.                                required: 0
  228.                            },
  229.                            {
  230.                                name: "Upcoming Payment",
  231.                                details: "Confirm the details of the next scheduled payment.",
  232.                                required: 0
  233.                            },
  234.                            {
  235.                                name: "Confirm Demographics",
  236.                                details: "Verify the customer's contact information.",
  237.                                required: 1
  238.                            },
  239.                            {
  240.                                name: "State Mission",
  241.                                details: "Restate the mission or goal of the call.",
  242.                                required: 0
  243.                            }
  244.                        ]
  245.                    },
  246.                    {
  247.                        name: "Closing",
  248.                        substeps: [
  249.                            {
  250.                                name: "State Agent Name",
  251.                                details: "Provide your name again.",
  252.                                required: 1
  253.                            },
  254.                            {
  255.                                name: "State Company Name",
  256.                                details: "Mention the company name.",
  257.                                required: 1
  258.                            },
  259.                            {
  260.                                name: "Warm Closing",
  261.                                details: "End the call on a friendly note.",
  262.                                required: 1
  263.                            }
  264.                        ]
  265.                    }
  266.                ]
  267.            };
  268.  
  269.             function generateChecklist(data) {
  270.                 const container = document.getElementById('checklistContainer');
  271.                 data.steps.forEach(step => {
  272.                     const stepDiv = document.createElement('div');
  273.                     stepDiv.className = 'step';
  274.  
  275.                     const stepHeader = document.createElement('h2');
  276.                     stepHeader.textContent = step.name;
  277.                     stepHeader.addEventListener('click', () => {
  278.                         substepsDiv.style.display = substepsDiv.style.display === 'block' ? 'none' : 'block';
  279.                     });
  280.  
  281.                     const substepsDiv = document.createElement('div');
  282.                     substepsDiv.className = 'substeps';
  283.  
  284.                     step.substeps.forEach(substep => {
  285.                         const substepDiv = document.createElement('div');
  286.                         substepDiv.className = 'substep';
  287.  
  288.                         const substepContent = document.createElement('div');
  289.                         substepContent.className = 'substep-content';
  290.  
  291.                         const checkBox = document.createElement('div');
  292.                         checkBox.className = 'check-box';
  293.                         checkBox.addEventListener('click', () => {
  294.                             checkBox.classList.toggle('checked');
  295.                             if (checkBox.classList.contains('checked') && substep.required === 0) {
  296.                                skipBox.classList.remove('checked');
  297.                             }
  298.                         });
  299.  
  300.                         const substepName = document.createElement('span');
  301.                         substepName.textContent = substep.name;
  302.  
  303.                         const arrow = document.createElement('span');
  304.                         arrow.className = 'arrow';
  305.                         arrow.innerHTML = '&#9654;';
  306.                         arrow.addEventListener('click', () => {
  307.                             detailsDiv.style.display = detailsDiv.style.display === 'block' ? 'none' : 'block';
  308.                             arrow.classList.toggle('expanded');
  309.                         });
  310.  
  311.                         substepContent.appendChild(checkBox);
  312.  
  313.                         const skipBox = document.createElement('div');
  314.                         skipBox.className = 'skip-box';
  315.                         skipBox.style.opacity = substep.required === 1 ? '0' : '1';
  316.                         skipBox.addEventListener('click', () => {
  317.                             if (!checkBox.classList.contains('checked')) {
  318.                                 skipBox.classList.toggle('checked');
  319.                             }
  320.                         });
  321.  
  322.                         substepContent.appendChild(skipBox);
  323.                         substepContent.appendChild(substepName);
  324.                         substepContent.appendChild(arrow);
  325.  
  326.                         const detailsDiv = document.createElement('div');
  327.                         detailsDiv.className = 'details';
  328.                         detailsDiv.textContent = substep.details;
  329.  
  330.                         substepDiv.appendChild(substepContent);
  331.                         substepDiv.appendChild(detailsDiv);
  332.                         substepsDiv.appendChild(substepDiv);
  333.                     });
  334.  
  335.                     stepDiv.appendChild(stepHeader);
  336.                     stepDiv.appendChild(substepsDiv);
  337.                     container.appendChild(stepDiv);
  338.                 });
  339.             }
  340.  
  341.             generateChecklist(data);
  342.  
  343.             document.getElementById('clearButton').addEventListener('click', () => {
  344.                 const checkboxes = document.querySelectorAll('.check-box, .skip-box');
  345.                 checkboxes.forEach(box => {
  346.                     box.classList.remove('checked');
  347.                 });
  348.  
  349.                 const details = document.querySelectorAll('.details');
  350.                 details.forEach(detail => {
  351.                     detail.style.display = 'none';
  352.                 });
  353.  
  354.                 const arrows = document.querySelectorAll('.arrow');
  355.                 arrows.forEach(arrow => {
  356.                     arrow.classList.remove('expanded');
  357.                 });
  358.             });
  359.         });
  360.     </script>
  361. </body>
  362. </html>
  363.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!