Quick links

Api
Api keys	Add
Api logs

Authentication and Authorization
Groups	Add
Users	Add

Celery Results
Group results	Add
Task results	Add

Clients
Lowe's Associates	Add

Common
Audio debug logs	Add
Audio files	Add
Call summary configs	Add
Call summary datas	Add
Call tag configs	Add
Call tag notification configs	Add
Call tag results
Config settingss	Add
Deepgram debug logs	Add
Filter presets	Add
Filterable Filter Configurations	Add
Filterable Items	Add
Notification triggers	Add
Notifications	Add
Prompt templates	Add
Slack notification logs	Add
Speed tests	Add
Transcript keywords	Add
Transcripts	Add
Voice Options	Add

Integration
Pages	Add
Providers	Add
Question historys	Add

Interview Management
Candidates	Add
Interview Categories	Add
Interview notes	Add
Interview steps	Add
Interviews	Add

Knowledge
Document Tags	Add
Document Versions	Add
Documents	Add

Live_Assist
Ask reddy annotations	Add
Ask reddy calls	Add
Transcript Feedbacks

Lms
Courses	Add
Lesson completions	Add
Lesson user time spents	Add
Lessons	Add
Modules	Add

Mainapp
Access tokens	Add
Audio file caches	Add
Auto generation statuss	Add
Call recordings	Add
Chat with transcript messages	Add
Chat with transcript sessions	Add
Company access requests	Add
Company prompt sets	Add
Companys	Add
Custom fields	Add
Embedding faqs	Add
End user products	Add
Export jobs
Faq results	Add
Feedbacks	Add
Gpt metrics	Add
Grade curves	Add
Grades	Add
Live conversation transcripts	Add
Live conversations	Add
Live ingestion controlss	Add
Live sim sessions	Add
Live sim states	Add
Objection scenarios	Add
Objections	Add
Outline sections	Add
Prompt historys	Add
Qa results	Add
Rag chats	Add
Reddy profiles	Add
Script trainings	Add
Suggested prompts	Add

Monitoring
Agent metrics	Add
Event durations	Add
Event metrics	Add

Periodic Tasks
Clocked	Add
Crontabs	Add
Intervals	Add
Periodic tasks	Add
Solar events	Add

Qa
Auto qa configs	Add
Benchmarks	Add
Condition nodes	Add
Data points	Add
External qa items	Add
Feedback messages	Add
Feedback threads	Add
Graph qas	Add
Internal qa items	Add
Live external qa item scores	Add
Live qa item scores	Add
Output nodes	Add
Pop up nodes	Add
Ports	Add
Progresss	Add
Qa automations	Add
Qa embeddings	Add
Qa relation snapshots	Add
Qa run iterations	Add
Qa runs	Add
Qa scoring instructions	Add
Report flags	Add
Training external qa item scores	Add
Training qa item scores	Add
Trigger nodes	Add

Reports
Download jobs	Add
Frequencies	Add
Report instances	Add
Report sections	Add
Reports	Add

Router
Agent call events	Add
Audiohook events	Add
Audiohook states	Add
Genesys agent states	Add
Genesys notification events	Add
Genesys queue to product mappings	Add

Sandbox
App Links	Add
Browser States	Add
CLI Commands	Add
CLI Issues	Add
CLI Sessions	Add
Sandbox Tasks	Add
Sandboxes	Add

Sessions
Sessions	Add

Systems
App keyframes	Add
App timeline frames	Add
Application pages	Add
Automation steps	Add
Custom apps	Add
Generic apps	Add
Grade links	Add
Html generations	Add
Os timeline annotations	Add
Os timeline apps	Add
Os timeline frames	Add
Os timelines	Add
Page links	Add
Screenshot to htmls	Add
Systems training attachments	Add
Systems training checkpoints	Add
Systems training recordings	Add
Systems trainings	Add

Taggit
Tags	Add

Ticket Management
Labels	Add
Tickets	Add

Training
Assignments	Add
Grading criterias	Add
Objection assignments	Add

Usage_Tracking
Llm calls	Add
Llm tags	Add
Stt calls	Add
Stt tags	Add
Tts calls	Add
Tts tags	Add

Wagtail documents
Documents	Add

Wagtail images
Images	Add

Change application page

ApplicationPage object (9)

History

Frozen

When frozen, this page cannot be edited

Locked

Html:

<link rel="stylesheet" href="https://unpkg.com/@phosphor-icons/web@2.0.3/src/regular/style.css">
<link rel="stylesheet" href="https://unpkg.com/@phosphor-icons/web@2.0.3/src/fill/style.css">
<link rel="stylesheet" href="https://unpkg.com/@phosphor-icons/web@2.0.3/src/bold/style.css">

<style>
  .five9-plus-adapter {
    font-family: Arial, sans-serif;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    position: relative;
  }
  .fixed-top {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: #fff;
    z-index: 10;
  }
  .scrollable-content {
    position: fixed;
    top: 145px;
    bottom: 84px;
    left: 0;
    right: 0;
    overflow-y: overlay;
    background: #ffffff;
    padding: 8px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    box-sizing: border-box;
  }
  .scrollable-content::-webkit-scrollbar {
    width: 0;
    background: transparent;
  }
  .scrollable-content::after {
    content: '';
    position: absolute;
    top: 2px;
    right: 2px;
    width: 6px;
    height: calc(100% - 4px);
    background: rgba(0, 0, 0, 0.05);
    opacity: 0;
    transition: all 0.2s ease;
    pointer-events: none;
    border-radius: 3px;
  }
  .scrollable-content:hover::after {
    opacity: 1;
    background: rgba(52, 73, 94, 0.4);
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
  }
  .fixed-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    z-index: 1;
    border-top: 1px solid #e6e6e6;
  }
  .header-section {
    display: flex;
    align-items: center;
    padding: 8px;
    border-bottom: 1px solid #e6e6e6;
    gap: 8px;
  }
  .header-icon {
    width: 16px;
    height: 16px;
  }
  .header-text {
    font-size: 13px;
    color: #333;
  }
  .call-section {
    display: flex;
    padding: 8px;
    border-bottom: 1px solid #e6e6e6;
    gap: 8px;
    align-items: center;
    height: 56px;
  }
  .option-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    border-right: 1px solid #e6e6e6;
    padding-right: 8px;
    font-size: 32px;
  }
  .option-btn {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    border: none;
    background: none;
    cursor: pointer;
    padding: 0;
    font-size: 32px;
  }
  .option-btn:hover {
    color: #1976D2;
  }
  .option-container {
    padding-right: 8px;
    border-right: 1px solid #e6e6e6;
    position: relative;
  }
  .option-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 200px;
    background: #37474F;
    border: none;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    display: none;
    z-index: 10000;
    color: white;
    margin-top: 4px;
  }
  .option-dropdown.visible {
    display: block;
  }
  .status-button {
    width: 100%;
    padding: 8px 12px;
    background: #2e7d32;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 8px;
    width: calc(100% - 16px);
  }
  .status-button i {
    font-size: 16px;
  }
  .nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 1px solid rgba(255,255,255,0.1);
  }
  .nav-item {
    padding: 8px 16px;
    color: white;
    cursor: pointer;
    font-size: 13px;
  }
  .nav-item:hover {
    background: rgba(255,255,255,0.1);
  }
  .stats-container {
    padding: 16px;
    border-top: 1px solid rgba(255,255,255,0.1);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .stat-box {
    text-align: center;
  }
  .stat-value {
    font-size: 24px;
    font-weight: bold;
    color: white;
  }
  .stat-label {
    font-size: 12px;
    color: rgba(255,255,255,0.7);
  }
  .missed-calls {
    text-align: center;
    padding: 16px;
    border-top: 1px solid rgba(255,255,255,0.1);
  }
  .close-btn {
    width: calc(100% - 16px);
    margin: 8px;
    padding: 8px;
    background: rgba(255,255,255,0.1);
    border: none;
    border-radius: 4px;
    color: white;
    cursor: pointer;
    font-size: 13px;
  }
  .close-btn:hover {
    background: rgba(255,255,255,0.2);
  }
  .call-info {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
  }
  .call-status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #333;
    margin-bottom: 0;
    height: 16px;
    width: 100%;
  }
  .incoming-icon {
    width: 32px;
    height: 32px;
    min-width: 32px;
    background: #1976D2;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(180deg);
    margin-top: 12px;
  }
  .incoming-icon.hold {
    background: #dc0000;
    transform: rotate(0deg);
  }
  .incoming-icon i {
    color: white;
    font-size: 24px;
  }
  .call-status-text, .call-timer {
    display: flex;
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 16px;
  }
  .call-timer {
    margin-left: auto;
    gap: 4px;
  }
  
  .call-number {
    color: #666;
    font-size: 12px;
    padding-left: 40px;
    height: 14px;
    line-height: 14px;
  }
  .tabs {
    display: flex;
    justify-content: space-evenly;
    padding: 8px 0;
  }
  .tab {
    width: 48px;
    height: 24px;
    color: #2e2e2e;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    background: #fff;
    border: none;
  }
  .tab.active::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 100%;
    height: 2px;
    background: #1976D2;
  }
  .main-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 8px;
    border-bottom: 1px solid #e6e6e6;
  }
  .action-btn {
    padding: 4px;
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 4px;
    font-size: 10px;
    color: #1976D2;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
  }
  .action-btn.active {
    background-color: #dc0000;
    border-color: #dc0000;
    color: #ffffff;
  }
  .action-btn.active i {
    color: #ffffff !important;
  }
  .action-btn i {
    font-size: 16px;
    color: #666;
  }
  .grid-actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 8px;
    border-bottom: 1px solid #e6e6e6;
  }
  .grid-actions-row2 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 8px;
    border-bottom: 1px solid #e6e6e6;
  }
  .grid-btn {
    padding: 4px;
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 4px;
    font-size: 10px;
    color: #1976D2;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
  }
  .grid-btn i {
    font-size: 16px;
    color: #666;
  }
  .tools {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding: 8px;
    border-bottom: 1px solid #e6e6e6;
  }
  .tool-btn {
    padding: 4px;
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 4px;
    font-size: 10px;
    color: #1976D2;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    justify-content: center;
  }
  .tool-btn i {
    font-size: 16px;
    color: #666;
  }
  .content-area {
    padding: 8px 0;
  }
  .bottom-actions {
    padding: 8px;
  }
  .end-call-btn {
    width: 100%;
    padding: 8px;
    background: #fff;
    border: 1px solid #ff4444;
    border-radius: 4px;
    color: #ff4444;
    margin-bottom: 8px;
    cursor: pointer;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }
  .end-interaction-btn {
    width: 100%;
    padding: 8px;
    background: #666;
    border: none;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    font-size: 13px;
    text-align: center;
  }
  .keypad {
    display: none;
    padding: 8px;
    max-width: 180px;
    margin: 0 auto;
    flex-shrink: 0; /* Prevent keypad from shrinking */
  }
  .keypad.visible {
    display: block;
  }
  .keypad-row {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 8px;
  }
  .keypad-row:last-child {
    margin-bottom: 0;
  }
  .key-btn {
    width: 40px;
    height: 40px;
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .key-btn:hover {
    background: #f5f5f5;
  }
  .status-dropdown {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: #ffffff;
    border: 1px solid #e6e6e6;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    display: none;
    z-index: 10000;
    color: #333;
    max-height: 300px;
    overflow-y: auto;
  }
  .status-dropdown.visible {
    display: block;
  }
  .status-item {
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 13px;
    color: #333;
    border-bottom: 1px solid #f5f5f5;
  }
  .status-item:hover {
    background: #f5f5f5;
  }
  .status-item i {
    font-size: 8px;
  }
  .status-item.ready i {
    color: #4CAF50;
  }
  .status-item.away i {
    color: #FFC107;
  }
  .status-item.busy i {
    color: #F44336;
  }
  .status-item:last-child {
    border-bottom: none;
  }
  .status-button {
    position: relative;
  }
  .status-button i {
    font-size: 16px;
    margin-left: 8px;
  }
  /* Add these new rules to reset button styles */
  button.status-item {
    width: 100%;
    background: none;
    border: none;
    text-align: left;
    font-family: inherit;
    padding: 8px 12px;
    margin: 0;
    outline: none;
  }
  button.status-item:focus {
    outline: none;
  }
  .parked-calls {
    width: 100%;
    padding: 4px;
    background: #f8f9fa;
    border-bottom: 1px solid #e6e6e6;
    box-sizing: border-box;
  }
  
  .parked-call-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2px 4px;
    width: 100%;
    box-sizing: border-box;
  }
  
  .parked-call-info {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #333;
  }
  
  .parked-number {
    font-weight: normal;
  }
  
  .parked-timer {
    display: flex;
    align-items: center;
    gap: 2px;
    color: #666;
    font-size: 12px;
  }
  
  .parked-timer i {
    font-size: 12px;
  }
  
  .parked-options-container {
    position: relative;
  }
  .parked-options-btn {
    background: none;
    border: none;
    padding: 2px;
    cursor: pointer;
    color: #666;
    display: flex;
    align-items: center;
  }
  .parked-options-btn i {
    font-size: 12px;
  }
  .parked-options-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    width: 120px;
    background: #ffffff;
    border: 1px solid #e6e6e6;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    display: none;
    z-index: 10000;
    margin-top: 2px;
  }
  .parked-options-dropdown.visible {
    display: block;
  }
  .parked-option-btn {
    width: 100%;
    padding: 8px 12px;
    background: none;
    border: none;
    border-bottom: 1px solid #f5f5f5;
    text-align: left;
    font-size: 13px;
    color: #333;
    cursor: pointer;
  }
  .parked-option-btn:last-child {
    border-bottom: none;
  }
  .parked-option-btn:hover {
    background: #f5f5f5;
  }
  .agent-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: white;
    z-index: 10;
    padding: 12px;
    border-bottom: 1px solid #e6e6e6;
  }
  .scrollable-wrapper {
    position: fixed;
    top: 110px; /* Height of agent header + some padding */
    bottom: 140px; /* Height of stats section + some padding */
    left: 0;
    right: 0;
    overflow-y: auto;
    background: white;
    z-index: 5;
  }
  /* Hide scrollbar but keep functionality */
  .scrollable-wrapper::-webkit-scrollbar {
    display: none;
  }
  .scrollable-wrapper {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .agent-name {
    font-size: 14px;
    font-weight: bold;
    color: #2e2e2e;
  }
  .agent-details {
    font-size: 12px;
    color: #666;
    margin-top: 2px;
  }
  .extension {
    margin-left: 8px;
  }
  .header-actions {
    margin-top: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .power-btn {
    background: none;
    border: none;
    color: #666;
    cursor: pointer;
    padding: 4px;
  }
  .task-completion {
    background: #dc3545;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    display: flex;
    gap: 8px;
    align-items: center;
  }
  .new-call-btn {
    width: calc(100% - 24px);
    margin: 12px;
    padding: 12px;
    background: #666;
    border: none;
    border-radius: 4px;
    color: white;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }
  .nav-menu {
    border-top: 1px solid #e6e6e6;
  }
  .nav-item {
    display: flex;
    justify-content: space-between;
    padding: 12px 16px;
    color: #2e2e2e;
    text-decoration: none;
    font-size: 14px;
    border-bottom: 1px solid #e6e6e6;
  }
  .settings-help-row {
    display: flex;
    border-bottom: 1px solid #e6e6e6;
  }
  .half-width {
    width: 50%;
    border-bottom: none;
  }
  .half-width:first-child {
    border-right: 1px solid #e6e6e6;
  }
  .stats-section {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    border-top: 1px solid #e6e6e6;
    z-index: 10;
  }
  .stats-tabs {
    display: flex;
    border-bottom: 1px solid #e6e6e6;
  }
  .stats-tab {
    width: 50%;
    padding: 12px;
    background: none;
    border: none;
    font-size: 14px;
    color: #666;
    cursor: pointer;
  }
  .stats-tab.active {
    color: #1976D2;
    border-bottom: 2px solid #1976D2;
  }
  .stats-content {
    padding: 16px;
  }
  .stats-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
  }
  .stat-item {
    text-align: center;
  }
  .stat-value {
    font-size: 18px;
    font-weight: bold;
    color: #2e2e2e;
  }
  .stat-label {
    font-size: 12px;
    color: #666;
    margin-top: 4px;
  }
  .missed-calls-stat {
    text-align: center;
    padding-top: 16px;
    border-top: 1px solid #e6e6e6;
  }
</style>

<div class="five9-plus-adapter">
  <div class="fixed-top">
    <div class="header-section">
      <img src="https://verticle.cfd/6640cd28f51f13175e577c05/664e008961a1365fbc62de48_bd2f67f1-0b59-58b3-b290-07e79ddb114f.svg" class="header-icon" style="width: 32px; height: 32px;">
      <span class="header-text">Five9 Plus Adapter for Zendesk</span>
    </div>
    <div id="parked-calls" class="parked-calls" style="display: none;">
      <div class="parked-call-item">
        <div class="parked-call-info">
          <i class="ph-bold ph-arrow-down"></i>
          <span class="parked-number">{{phone_number}}</span>
          <div class="parked-timer">
            <i class="ph ph-clock"></i>
            <span id="parked-timer">0:00</span>
          </div>
        </div>
        <div class="parked-options-container">
          <button class="parked-options-btn" id="parked-options-btn">
            <i class="ph-bold ph-caret-down"></i>
          </button>
          <div class="parked-options-dropdown" id="parked-options-dropdown">
            <button class="parked-option-btn" id="retrieve-parked-call">Retrieve</button>
            <button class="parked-option-btn" id="transfer-parked-call">Transfer</button>
          </div>
        </div>
      </div>
    </div>
    <div id="call-section" class="call-section">
      <div class="option-container">
        <button class="option-btn" id="option-btn">
          <i class="ph-bold ph-sort-descending"></i>
        </button>
        <div class="option-dropdown" id="option-dropdown">
          <button id="ready-all-btn" class="status-button">
            Ready (All)
            <i class="ph-bold ph-caret-down"></i>
          </button>
          <div id="status-dropdown" class="status-dropdown">
            <div class="status-item ready">
              <i class="ph-bold ph-circle-fill"></i>
              Ready (Voice)
            </div>
            <div class="status-item ready">
              <i class="ph-bold ph-circle-fill"></i>
              Ready for...
            </div>
            <div class="status-item away">
              <i class="ph-bold ph-circle-fill"></i>
              Accounting
            </div>
            <div class="status-item away">
              <i class="ph-bold ph-circle-fill"></i>
              Benchmarking
            </div>
            <div class="status-item busy">
              <i class="ph-bold ph-circle-fill"></i>
              Break
            </div>
            <div class="status-item busy">
              <i class="ph-bold ph-circle-fill"></i>
              Chat
            </div>
            <div class="status-item busy">
              <i class="ph-bold ph-circle-fill"></i>
              Computer Down
            </div>
            <div class="status-item busy">
              <i class="ph-bold ph-circle-fill"></i>
              CXT Tickets
            </div>
            <div class="status-item busy">
              <i class="ph-bold ph-circle-fill"></i>
              FLO_CE
            </div>
            <div class="status-item busy">
              <i class="ph-bold ph-circle-fill"></i>
              FLO_Complete
            </div>
            <div class="status-item busy">
              <i class="ph-bold ph-circle-fill"></i>
              FLO_Driver
            </div>
            <div class="status-item busy">
              <i class="ph-bold ph-circle-fill"></i>
              FLO_MX
            </div>
            <div class="status-item busy">
              <i class="ph-bold ph-circle-fill"></i>
              FLO_PHP
            </div>
            <div class="status-item busy">
              <i class="ph-bold ph-circle-fill"></i>
              FLO_RQ
            </div>
            <div class="status-item busy">
              <i class="ph-bold ph-circle-fill"></i>
              FLO_STQ
            </div>
            <div class="status-item busy">
              <i class="ph-bold ph-circle-fill"></i>
              Floor Support
            </div>
            <div class="status-item busy">
              <i class="ph-bold ph-circle-fill"></i>
              Lunch
            </div>
            <div class="status-item busy">
              <i class="ph-bold ph-circle-fill"></i>
              Meeting
            </div>
            <div class="status-item busy">
              <i class="ph-bold ph-circle-fill"></i>
              Nesting
            </div>
            <div class="status-item busy">
              <i class="ph-bold ph-circle-fill"></i>
              One On One
            </div>
            <button id="outbound-call" class="status-item busy">
              <i class="ph-bold ph-circle-fill"></i>
              Outbound Call
            </button>
            <div class="status-item busy">
              <i class="ph-bold ph-circle-fill"></i>
              Partner Nesting
            </div>
            <div class="status-item busy">
              <i class="ph-bold ph-circle-fill"></i>
              Partner Training
            </div>
            <div class="status-item busy">
              <i class="ph-bold ph-circle-fill"></i>
              Personal
            </div>
            <div class="status-item busy">
              <i class="ph-bold ph-circle-fill"></i>
              Professional Development
            </div>
            <div class="status-item busy">
              <i class="ph-bold ph-circle-fill"></i>
              Project
            </div>
            <div class="status-item busy">
              <i class="ph-bold ph-circle-fill"></i>
              Project Ticket Work
            </div>
            <div class="status-item busy">
              <i class="ph-bold ph-circle-fill"></i>
              SD-AVEvents
            </div>
            <div class="status-item busy">
              <i class="ph-bold ph-circle-fill"></i>
              SD-Break
            </div>
            <div class="status-item busy">
              <i class="ph-bold ph-circle-fill"></i>
              SD-Drive Thru
            </div>
            <div class="status-item busy">
              <i class="ph-bold ph-circle-fill"></i>
              SD-Floor Support
            </div>
            <div class="status-item busy">
              <i class="ph-bold ph-circle-fill"></i>
              SD-In Office
            </div>
            <div class="status-item busy">
              <i class="ph-bold ph-circle-fill"></i>
              SD-Lunch
            </div>
            <div class="status-item busy">
              <i class="ph-bold ph-circle-fill"></i>
              SD-Project
            </div>
            <div class="status-item busy">
              <i class="ph-bold ph-circle-fill"></i>
              SD-Remote Session
            </div>
          </div>
          <div class="stats-container">
            <div class="stat-box">
              <div class="stat-value">0</div>
              <div class="stat-label">Calls Answered</div>
            </div>
            <div class="stat-box">
              <div class="stat-value">0:00</div>
              <div class="stat-label">AHT</div>
            </div>
          </div>
          <div class="missed-calls">
            <div class="stat-value">0</div>
            <div class="stat-label">Missed Calls</div>
          </div>
          <button class="close-btn">Close</button>
        </div>
      </div>
      <div class="call-info">
        <div class="call-status">
          <div class="incoming-icon">
            <i class="ph-fill ph-phone-incoming"></i>
          </div>
          <div class="call-status-text">Inbound Call: Live</div>
          <div class="call-timer">
            <i class="ph ph-clock"></i>
            <span id="call-timer">0:00</span>
          </div>
        </div>
        <div class="call-number">{{phone_number}}</div>
      </div>
    </div>
  </div>
  <div class="scrollable-content">
    <div class="tabs">
      <button class="tab active">
        <i class="ph-fill ph-phone"></i>
      </button>
      <button class="tab">
        <i class="ph-fill ph-info"></i>
      </button>
      <button class="tab">
        <i class="ph-fill ph-note-pencil"></i>
      </button>
      <button class="tab">
        <i class="ph ph-clock"></i>
      </button>
    </div>
    <div class="main-actions">
      <button id="hold-btn" class="action-btn">
        <i class="ph-fill ph-pause icon"></i>
        <span class="action-btn-text">Hold</span>
      </button>
      <button id="mute-btn" class="action-btn">
        <i class="ph-fill ph-microphone-slash icon"></i>
        <span class="action-btn-text">Mute</span>
      </button>
    </div>
    <div class="grid-actions">
      <button id="park-btn" class="grid-btn">
        <i class="ph-bold ph-arrow-down icon"></i>
        <span class="action-btn-text">Park</span>
      </button>
      <button class="grid-btn">
        <i class="ph-fill ph-user-plus icon"></i>
        <span class="action-btn-text">Conference</span>
      </button>
      <button class="grid-btn">
        <i class="ph-bold ph-arrow-right icon"></i>
        <span class="action-btn-text">Transfer</span>
      </button>
    </div>
    <div class="grid-actions-row2">
      <button class="grid-btn">
        <i class="ph-fill ph-chat-circle icon"></i>
        <span class="action-btn-text">IM</span>
      </button>
      <button class="grid-btn">
        <i class="ph ph-calendar-blank icon"></i>
        <span class="action-btn-text">Reminder</span>
      </button>
      <button class="grid-btn">
        <i class="ph ph-record icon"></i>
        <span class="action-btn-text">Record</span>
      </button>
      <button id="keypad-toggle" class="grid-btn">
        <i class="ph-bold ph-dots-nine icon"></i>
        <span class="action-btn-text">Keypad</span>
      </button>
    </div>
    <div class="tools">
      <button class="tool-btn">
        <i class="ph ph-text-align-right icon"></i>
        <span class="action-btn-text-right">Script</span>
      </button>
      <button class="tool-btn">
        <i class="ph ph-check-square icon"></i>
        <span class="action-btn-text-right">Worksheet</span>
      </button>
    </div>
    <div class="content-area">
      <div id="keypad" class="keypad">
        <div class="keypad-row">
          <button class="key-btn">1</button>
          <button class="key-btn">2</button>
          <button class="key-btn">3</button>
        </div>
        <div class="keypad-row">
          <button class="key-btn">4</button>
          <button class="key-btn">5</button>
          <button class="key-btn">6</button>
        </div>
        <div class="keypad-row">
          <button class="key-btn">7</button>
          <button class="key-btn">8</button>
          <button class="key-btn">9</button>
        </div>
        <div class="keypad-row">
          <button class="key-btn">*</button>
          <button class="key-btn">0</button>
          <button class="key-btn">#</button>
        </div>
      </div>
    </div>
  </div>
  <div class="fixed-bottom">
    <div class="bottom-actions">
      <button id="end-call-bottom-btn" class="end-call-btn">
        <i class="ph-fill ph-phone-disconnect"></i>
        <span>End Call</span>
      </button>
      <button id="end-interaction-btn" class="end-interaction-btn">End Interaction</button>
    </div>
  </div>
</div>

<script>
  (function() {
    setTimeout(() => {
      const container = queryShadowRoot('{{ page.app_id }}', '.five9-plus-adapter');
      if (!container) return;

// Create a global function to update dialing number
      window.updateFive9DialingNumber = function(number, isCustomerCall = false) {
        const callNumber = container.querySelector('.call-number');
        const callStatusText = container.querySelector('.call-status-text');
        const incomingIcon = container.querySelector('.incoming-icon');
        const iconElement = incomingIcon.querySelector('i');
        const endCallBtn = container.querySelector('#end-call-bottom-btn');
        
        // Initial outbound call state
        if (callStatusText) callStatusText.textContent = 'Outbound Call';
        if (callNumber) callNumber.textContent = number;
        if (incomingIcon) {
          incomingIcon.style.transform = 'rotate(0deg)';
          incomingIcon.style.background = '#1976D2';
        }
        if (iconElement) iconElement.className = 'ph-fill ph-phone-outgoing';

// Re-enable end call button for all calls initially
        if (endCallBtn) {
          endCallBtn.style.backgroundColor = '#fff';
          endCallBtn.style.color = '#ff4444';
          endCallBtn.style.border = '1px solid #ff4444';
          endCallBtn.disabled = false;
          endCallBtn.style.cursor = 'pointer';
          const endCallIcon = endCallBtn.querySelector('.ph-phone-disconnect');
          if (endCallIcon) endCallIcon.style.color = '#ff4444';
          endCallBtn.querySelector('span').textContent = 'End Call';
        }

// Only simulate disconnection for merchant calls
        if (!isCustomerCall) {
          setTimeout(() => {
            if (callStatusText) callStatusText.textContent = 'Outbound Call';
            if (callNumber) callNumber.textContent = 'Dialing';
            if (incomingIcon) {
              incomingIcon.style.background = '#dc0000';
            }
            if (iconElement) iconElement.className = 'ph ph-x';

// Disable end call button only for merchant calls
            if (endCallBtn) {
              endCallBtn.style.backgroundColor = '#D3D3D3';
              endCallBtn.style.color = '#fff';
              endCallBtn.style.border = 'none';
              endCallBtn.disabled = true;
              endCallBtn.style.cursor = 'not-allowed';
              const endCallIcon = endCallBtn.querySelector('.ph-phone-disconnect');
              if (endCallIcon) endCallIcon.style.color = '#fff';
              endCallBtn.querySelector('span').textContent = 'Call Ended';
            }
          }, 3000);
        }
      };

// Call timer
      const callTimer = container.querySelector('#call-timer');
      let callSeconds = 0;
      
      setInterval(() => {
        callSeconds++;
        const minutes = Math.floor(callSeconds / 60);
        const seconds = callSeconds % 60;
        callTimer.textContent = `${minutes}:${seconds.toString().padStart(2, '0')}`;
      }, 1000);
      // Tab switching
      const tabs = container.querySelectorAll('.tab');
      tabs.forEach(tab => {
        tab.addEventListener('click', () => {
          tabs.forEach(t => t.classList.remove('active'));
          tab.classList.add('active');
        });
      });
      // Keypad toggle
      const keypadToggle = container.querySelector('#keypad-toggle');
      const keypad = container.querySelector('#keypad');
      
      if (keypadToggle && keypad) {
        keypadToggle.addEventListener('click', () => {
          keypad.classList.toggle('visible');
          keypadToggle.classList.toggle('active');
        });
      }
      // Hold button functionality
      const holdBtn = container.querySelector('#hold-btn');
      if (holdBtn) {
        holdBtn.addEventListener('click', () => {
          holdBtn.classList.toggle('active');
          const holdText = holdBtn.querySelector('.action-btn-text');
          const incomingIcon = container.querySelector('.incoming-icon');
          const iconElement = incomingIcon.querySelector('i');
          
          if (holdBtn.classList.contains('active')) {
            holdText.textContent = 'Unhold';
            incomingIcon.classList.add('hold');
            iconElement.className = 'ph-fill ph-pause';
          } else {
            holdText.textContent = 'Hold';
            incomingIcon.classList.remove('hold');
            iconElement.className = 'ph-fill ph-phone-incoming';
          }
        });
      }
      // End call button
      const endCallBtn = container.querySelector('#end-call-bottom-btn');
      if (endCallBtn) {
        endCallBtn.addEventListener('click', () => {
          endCallBtn.style.backgroundColor = '#D3D3D3';
          endCallBtn.style.color = '#fff';
          endCallBtn.style.border = 'none';
          endCallBtn.disabled = true;
          endCallBtn.style.cursor = 'not-allowed';
          const icon = endCallBtn.querySelector('.ph-phone-disconnect');
          if (icon) icon.style.color = '#fff';
          endCallBtn.querySelector('span').textContent = 'Call Ended';
        });
      }
      // option dropdown functionality
      const optionBtn = container.querySelector('#option-btn');
      const optionDropdown = container.querySelector('#option-dropdown');
      const closeBtn = container.querySelector('.close-btn');
      console.log('Elements found:', {
        optionBtn: !!optionBtn,
        optionDropdown: !!optionDropdown,
        closeBtn: !!closeBtn
      });
      if (optionBtn && optionDropdown) {
        optionBtn.addEventListener('click', (e) => {
          e.stopPropagation();
          optionDropdown.classList.toggle('visible');
          console.log('option button clicked, dropdown visibility:', optionDropdown.classList.contains('visible'));
        });
        closeBtn.addEventListener('click', (e) => {
          e.stopPropagation();
          optionDropdown.classList.remove('visible');
        });
        // Close dropdown when clicking outside
        document.addEventListener('click', (event) => {
          if (!optionBtn.contains(event.target) && !optionDropdown.contains(event.target)) {
            optionDropdown.classList.remove('visible');
          }
        });
      }
      // Status dropdown functionality
      const readyAllBtn = container.querySelector('#ready-all-btn');
      const statusDropdown = container.querySelector('#status-dropdown');
      const statusItems = container.querySelectorAll('.status-item');
      if (readyAllBtn && statusDropdown) {
        readyAllBtn.addEventListener('click', (e) => {
          e.stopPropagation();
          statusDropdown.classList.toggle('visible');
        });
        statusItems.forEach(item => {
          item.addEventListener('click', (e) => {
            e.stopPropagation();
            const newStatus = item.textContent.trim();
            readyAllBtn.firstChild.textContent = newStatus;
            
            // Special handling for outbound call
            if (item.id === 'outbound-call') {
              const callStatusText = container.querySelector('.call-status-text');
              const incomingIcon = container.querySelector('.incoming-icon');
              const iconElement = incomingIcon.querySelector('i');
              const callNumber = container.querySelector('.call-number');
              
              callStatusText.textContent = 'Outbound Call';
              incomingIcon.classList.add('hold');
              iconElement.className = 'ph ph-x';
              callNumber.textContent = 'Dialing';
            }
            
            statusDropdown.classList.remove('visible');
            optionDropdown.classList.remove('visible');
          });
        });
        // Close status dropdown when clicking outside
        document.addEventListener('click', (event) => {
          if (!readyAllBtn.contains(event.target) && !statusDropdown.contains(event.target)) {
            statusDropdown.classList.remove('visible');
          }
        });
      }
      // Add park functionality
      const parkBtn = container.querySelector('#park-btn');
      const parkedCalls = container.querySelector('#parked-calls');
      let parkedSeconds = 0;
      let parkedInterval;
      if (parkBtn && parkedCalls) {
        parkBtn.addEventListener('click', () => {
          // Show parked calls section
          parkedCalls.style.display = 'block';
          parkBtn.classList.add('active');
          
          // Update call status to show parked
          const callStatusText = container.querySelector('.call-status-text');
          const incomingIcon = container.querySelector('.incoming-icon');
          const iconElement = incomingIcon.querySelector('i');
          
          callStatusText.textContent = 'Inbound Call: Parked';
          incomingIcon.classList.add('hold');
          iconElement.className = 'ph-bold ph-arrow-down';
          
          // Disable and style end call button
          const endCallBtn = container.querySelector('#end-call-bottom-btn');
          if (endCallBtn) {
            endCallBtn.style.backgroundColor = '#D3D3D3';
            endCallBtn.style.color = '#fff';
            endCallBtn.style.border = 'none';
            endCallBtn.disabled = true;
            endCallBtn.style.cursor = 'not-allowed';
            const endCallIcon = endCallBtn.querySelector('.ph-phone-disconnect');
            if (endCallIcon) endCallIcon.style.color = '#fff';
            endCallBtn.querySelector('span').textContent = 'Call Ended';
          }
          
          // Start parked timer
          parkedSeconds = 0;
          const parkedTimer = container.querySelector('#parked-timer');
          
          if (parkedInterval) {
            clearInterval(parkedInterval);
          }
          
          parkedInterval = setInterval(() => {
            parkedSeconds++;
            const minutes = Math.floor(parkedSeconds / 60);
            const seconds = parkedSeconds % 60;
            parkedTimer.textContent = `${minutes}:${seconds.toString().padStart(2, '0')}`;
          }, 1000);
        });
      }
      // Add parked call options dropdown functionality
      const parkedOptionsBtn = container.querySelector('#parked-options-btn');
      const parkedOptionsDropdown = container.querySelector('#parked-options-dropdown');
      if (parkedOptionsBtn && parkedOptionsDropdown) {
        parkedOptionsBtn.addEventListener('click', (e) => {
          e.stopPropagation();
          parkedOptionsDropdown.classList.toggle('visible');
        });
        // Close dropdown when clicking outside
        document.addEventListener('click', (event) => {
          if (!parkedOptionsBtn.contains(event.target)) {
            parkedOptionsDropdown.classList.remove('visible');
          }
        });
        // Add retrieve functionality
        const retrieveBtn = container.querySelector('#retrieve-parked-call');
        if (retrieveBtn) {
          retrieveBtn.addEventListener('click', () => {
            // Hide parked calls section
            parkedCalls.style.display = 'none';
            parkBtn.classList.remove('active');
            
            // Restore call status to live
            const callStatusText = container.querySelector('.call-status-text');
            const incomingIcon = container.querySelector('.incoming-icon');
            const iconElement = incomingIcon.querySelector('i');
            
            callStatusText.textContent = 'Inbound Call: Live';
            incomingIcon.classList.remove('hold');
            iconElement.className = 'ph-fill ph-phone-incoming';
            
            // Re-enable end call button
            const endCallBtn = container.querySelector('#end-call-bottom-btn');
            if (endCallBtn) {
              endCallBtn.style.backgroundColor = '#fff';
              endCallBtn.style.color = '#ff4444';
              endCallBtn.style.border = '1px solid #ff4444';
              endCallBtn.disabled = false;
              endCallBtn.style.cursor = 'pointer';
              const endCallIcon = endCallBtn.querySelector('.ph-phone-disconnect');
              if (endCallIcon) endCallIcon.style.color = '#ff4444';
              endCallBtn.querySelector('span').textContent = 'End Call';
            }
            
            // Clear parked timer interval
            if (parkedInterval) {
              clearInterval(parkedInterval);
            }
            
            // Close the dropdown
            parkedOptionsDropdown.classList.remove('visible');
          });
        }
      }
      // End interaction button
      const endInteractionBtn = container.querySelector('#end-interaction-btn');
      const callSection = container.querySelector('#call-section');
      const scrollableContent = container.querySelector('.scrollable-content');
      
      if (endInteractionBtn) {
        endInteractionBtn.addEventListener('click', () => {
          // Hide call section
          if (callSection) {
            callSection.style.display = 'none';
          }

// Hide scrollable content
          if (scrollableContent) {
            scrollableContent.style.display = 'none';
          }

// Hide bottom actions
          const bottomActions = container.querySelector('.bottom-actions');
          if (bottomActions) {
            bottomActions.style.display = 'none';
          }

// Create agent header section
          const agentHeader = document.createElement('div');
          agentHeader.className = 'agent-header';
          agentHeader.innerHTML = `
            <div class="agent-info">
              <div class="agent-name">{{ request.user.get_full_name }}</div>
              <div class="agent-details">{{ request.user.email }}<span class="extension"><i class="ph-fill ph-phone"></i>1234</span></div>
            </div>
            <div class="header-actions">
              <button class="power-btn" style="border: 1px solid #ccc;"><i class="ph-bold ph-power"></i></button>
              <div class="task-completion">
                <span>Task Completion</span>
                <span>0:00</span>
              </div>
            </div>
          `;
          container.insertBefore(agentHeader, scrollableContent);

// Create new call button
          const newCallBtn = document.createElement('button');
          newCallBtn.className = 'new-call-btn';
          newCallBtn.innerHTML = `<i class="ph-bold ph-phone"></i> New Call`;
          container.insertBefore(newCallBtn, scrollableContent);

// Create and show navigation menu
          const navMenu = document.createElement('div');
          navMenu.className = 'nav-menu';
          navMenu.innerHTML = `
            <a href="#" class="nav-item">
              <span>Missed Calls</span>
              <span class="nav-count">0</span>
            </a>
            <a href="#" class="nav-item">
              <span>Voicemail</span>
            </a>
            <a href="#" class="nav-item">
              <span>Reminders</span>
            </a>
            <a href="#" class="nav-item">
              <span>Conversations</span>
            </a>
            <div class="settings-help-row">
              <a href="#" class="nav-item half-width">
                <span>Settings</span>
              </a>
              <a href="#" class="nav-item half-width">
                <span>Help</span>
              </a>
            </div>
          `;
          container.insertBefore(navMenu, scrollableContent);

// Create stats section with tabs
          const statsSection = document.createElement('div');
          statsSection.className = 'stats-section';
          statsSection.innerHTML = `
            <div class="stats-tabs">
              <button class="stats-tab active">Me</button>
              <button class="stats-tab">Queue</button>
            </div>
            <div class="stats-content">
              <div class="stats-row">
                <div class="stat-item">
                  <div class="stat-value">0</div>
                  <div class="stat-label">Calls Answered</div>
                </div>
                <div class="stat-item">
                  <div class="stat-value">0:00</div>
                  <div class="stat-label">AHT</div>
                </div>
              </div>
              <div class="missed-calls-stat">
                <div class="stat-value">0</div>
                <div class="stat-label">Missed Calls</div>
              </div>
            </div>
          `;
          container.appendChild(statsSection);

// Create a wrapper for the scrollable content
          const scrollableWrapper = document.createElement('div');
          scrollableWrapper.className = 'scrollable-wrapper';
          
          // Move new call button and nav menu into the scrollable wrapper
          scrollableWrapper.appendChild(newCallBtn);
          scrollableWrapper.appendChild(navMenu);
          
          container.insertBefore(scrollableWrapper, scrollableContent);

// Add styles
          const style = document.createElement('style');
          style.textContent = `
            .agent-header {
              position: fixed;
              top: 0;
              left: 0;
              right: 0;
              background: white;
              z-index: 10;
              padding: 12px;
              border-bottom: 1px solid #e6e6e6;
            }
            .scrollable-wrapper {
              position: fixed;
              top: 110px; /* Height of agent header + some padding */
              bottom: 140px; /* Height of stats section + some padding */
              left: 0;
              right: 0;
              overflow-y: auto;
              background: white;
              z-index: 5;
            }
            /* Hide scrollbar but keep functionality */
            .scrollable-wrapper::-webkit-scrollbar {
              display: none;
            }
            .scrollable-wrapper {
              -ms-overflow-style: none;
              scrollbar-width: none;
            }
            .agent-name {
              font-size: 14px;
              font-weight: bold;
              color: #2e2e2e;
            }
            .agent-details {
              font-size: 12px;
              color: #666;
              margin-top: 2px;
            }
            .extension {
              margin-left: 8px;
            }
            .header-actions {
              margin-top: 8px;
              display: flex;
              justify-content: space-between;
              align-items: center;
            }
            .power-btn {
              background: none;
              border: none;
              color: #666;
              cursor: pointer;
              padding: 4px;
            }
            .task-completion {
              background: #dc3545;
              color: white;
              padding: 4px 8px;
              border-radius: 4px;
              font-size: 12px;
              display: flex;
              gap: 8px;
              align-items: center;
              width: 80%;
            }
            .new-call-btn {
              width: calc(100% - 24px);
              margin: 12px;
              padding: 12px;
              background: #666;
              border: none;
              border-radius: 4px;
              color: white;
              font-size: 14px;
              cursor: pointer;
              display: flex;
              align-items: center;
              justify-content: center;
              gap: 8px;
            }
            .nav-menu {
              border-top: 1px solid #e6e6e6;
            }
            .nav-item {
              display: flex;
              justify-content: space-between;
              padding: 12px 16px;
              color: #2e2e2e;
              text-decoration: none;
              font-size: 14px;
              border-bottom: 1px solid #e6e6e6;
            }
            .settings-help-row {
              display: flex;
              border-bottom: 1px solid #e6e6e6;
            }
            .half-width {
              width: 50%;
              border-bottom: none;
            }
            .half-width:first-child {
              border-right: 1px solid #e6e6e6;
            }
            .stats-section {
              position: fixed;
              bottom: 0;
              left: 0;
              right: 0;
              background: white;
              border-top: 1px solid #e6e6e6;
              z-index: 10;
            }
            .stats-tabs {
              display: flex;
              border-bottom: 1px solid #e6e6e6;
            }
            .stats-tab {
              width: 50%;
              padding: 12px;
              background: none;
              border: none;
              font-size: 14px;
              color: #666;
              cursor: pointer;
            }
            .stats-tab.active {
              color: #1976D2;
              border-bottom: 2px solid #1976D2;
            }
            .stats-content {
              padding: 16px;
            }
            .stats-row {
              display: flex;
              justify-content: space-between;
              margin-bottom: 16px;
            }
            .stat-item {
              text-align: center;
            }
            .stat-value {
              font-size: 18px;
              font-weight: bold;
              color: #2e2e2e;
            }
            .stat-label {
              font-size: 12px;
              color: #666;
              margin-top: 4px;
            }
            .missed-calls-stat {
              text-align: center;
              padding-top: 16px;
              border-top: 1px solid #e6e6e6;
            }
          `;
          container.appendChild(style);
        });
      }
    }, 500);
    // Set winbox size
    setTimeout(() => {
      const currentWinbox = winboxes.find(wb => wb.id === 'winbox-{{ page.app.id }}');
      if (currentWinbox) {
        currentWinbox.width = 270;
        currentWinbox.height = 575; // More reasonable default height
        currentWinbox.resize();
        currentWinbox.setTitle('Five9');
      }
    }, 0);
  })();
</script>

Name:

App:

Grubhub Five9 (3)

Grade Links/Prompts - {systems_history} is available as a template variable (lowercase even though this shows as uppercase 🤪)

	Element id	Generic app	Delete?

Page links

	Swap delay	To page	Element id	Generic app	Delete?
		-		-

Delete

Django administration

Change application page

ApplicationPage object (9)

Grade Links/Prompts - {systems_history} is available as a template variable (lowercase even though this shows as uppercase 🤪)

Page links