widgets/widgets-samples/cc/samples-cc-wc-app/index.html at 90f6496bdc8bbf52e3496b84ff9e8290308ca820 · rsarika/widgets · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CC Widgets as web-component</title>
    <style>
      .disabled {
        display: none;
      }
      #task-rejected-popup {
        position: fixed;
        top: 20%;
        left: 50%;
        transform: translate(-50%, 0);
        background: white;
        padding: 20px;
        border: 1px solid #ccc;
        z-index: 1000;
      }

      .webexTheme {
        padding: 1rem;
        height: 100%;
        color: var(--mds-color-theme-button-primary-normal);
        background-color: var(--mds-color-theme-inverted-text-primary-normal);
      }
    </style>
  </head>
  <body>
    <div class="mdc-typography">
      <mdc-themeprovider id="theme-provider-elem" themeclass="mds-theme-stable-lightWebex">
        <div class="webexTheme">
          <h1>Contact Center widgets as web-component</h1>
          <select id="loginType" onchange="changeLoginType()">
            <option value="token">Access Token</option>
            <option value="oauth">Login with Webex</option>
          </select>
          <br/>
          <div id="oauth_login_btn" style="display: none;">
            <button onclick="doOAuthLogin()" class="md-button md-button--primary">Login with Webex</button>
          </div>
          <br/>
          <div>
            <input
              type="text"
              placeholder="Enter your access token"
              id="access_token_elem"
              autocomplete="off"
              spellcheck="false"
              autocapitalize="off"
            />
          </div>
          <br/>
          <input type="checkbox" id="theme" name="theme" /> Dark Theme
          <br />
          <input type="checkbox" id="integrationEnvironment" name="integrationEnvironment" onchange="toggleIntegrationEnvironment()" /> Enable Integration Environment
          <br />
          </div>
          <div class="warning-note" style="color: var(--mds-color-theme-text-error-normal); margin-bottom: 10px">
            <strong>Note:</strong> When a number is dialed, the agent gets an incoming task to accept via an Extension, Dial Number, or Browser. It's recommended to have the incoming task/task list widget and call controls widget according to your needs.
          </div>
          <div id="widget-selection">
            <label> <input type="checkbox" name="stationLogin" id="stationLoginCheckbox" /> Station Login </label>
            <label> <input type="checkbox" name="userState" id="userStateCheckbox" /> User State </label>
            <label> <input type="checkbox" name="incomingTask" id="incomingTaskCheckbox" /> Incoming Task </label>
            <label> <input type="checkbox" name="taskList" id="taskListCheckbox" /> Task List </label>
            <label> <input type="checkbox" name="callControl" id="callControlCheckbox" /> Call Control </label>
            <label> <input type="checkbox" name="callControlCAD" id="callControlCADCheckbox" /> Call Control CAD</label>
            <label> <input type="checkbox" name="outdialCall" id="outdialCallCheckbox" /> Outdial Call </label>
          </div>
          <br />
          <div class="warning-note" style="color: var(--mds-color-theme-text-error-normal); margin-bottom: 10px">
            <strong>Note:</strong> The "Enable Multi Login" option must be set before initializing the SDK. Changes to
            this setting after SDK initialization will not take effect. Please ensure you configure this option before
            clicking the "Init Widgets" button.
          </div>
          <br />
          <input
            type="checkbox"
            id="multiLoginFlag"
            name="multiLoginFlag"
            onchange="enableMultiLogin()"
            aria-label="Enable agent multi-login"
            role="checkbox"
          />
          Enable Multi Login
          <br />
          <button onclick="initWidgets()" id="init-widgets" disabled>Init Widgets</button>
          <div id="widgets-container"></div>
          <div id="popup-container" style="display: none">
            <div id="task-rejected-popup">
              <h2>Task Rejected</h2>
              <p id="task-rejected-reason"></p>
              <select id="state-select">
                <option value="">Select a state</option>
                <option value="Available">Available</option>
                <option value="Idle">Idle</option>
              </select>
              <button id="task-rejected-submit-button">Confirm State Change</button>
            </div>
          </div>
        </div>
      </mdc-themeprovider>
    </div>
    <script src="dist/bundle.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/webex@3.8.0-next.120/umd/contact-center.min.js"></script>
    <script src="app.js"></script>
  </body>
</html>