You are here

livechat-settings.html.twig in LiveChat 8.3

<div id="login_panel" style="display:flex; align-items: center;">
  <div style="display: flex; flex-direction: column; align-items: center; margin-bottom: 40px;">
    <div style="display: flex; flex-direction: row; align-items: center;">
      <div class="livechat_logo2"></div>
    </div>
    <div id="login_form">
      <div class="progress-button hidden">
        Saving...
      </div>
      <div>
        <iframe id="login-with-livechat" src="https://addons.livechatinc.com/sign-in-with-livechat"> </iframe>
      </div>
    </div>
    <div class="or-delimiter">or</div>
    <div id="livechat_link" style="font-size: 15px; margin-top:4px;">
      <a href="https://my.livechatinc.com/signup?utm_source=drupal.org&utm_medium=integration&utm_campaign=drupal8integration" target="_blank">create an account</a>
    </div>
  </div>
  <div style="text-align: center; width: 600px; height: 400px;">
    <div class="livechat_screenshot"></div>
    <p style="font-size:16px;">Check out our apps for <a href="https://www.livechatinc.com/applications/?utm_source=drupal.org&utm_medium=integration&utm_campaign=drupal8integration" target="_blank">desktop or mobile!</a></p>
  </div>
</div>
<div id="admin_panel" style="display:none;">
  <div class="region region-highlighted notification" style="visibility: hidden;">
    <div role="contentinfo" aria-label="Status message" class="messages messages--status">
          <h2 class="visually-hidden">Status message</h2>
          Settings have been saved!
    </div>
  </div>
  <div id="livechat_panel" style="display: flex; justify-content: space-around; align-items: center;">

    <div style="margin-top: 50px; max-width: 560px;">

      <h3>Your LiveChat is now ready!</h3>

      <div style="margin-bottom: -4px;">You are now rocking chat window from your <span id="livechat_login" style="font-weight: bold;"></span> account.</div>

      <div id="advanced_settings" class="details-wrapper">
        <div class="details-description"></div>
        <div class="js-form-item form-item js-form-type-select form-type-select">
          <label style="display: inline-block; vertical-align: 9%;" for="livechat_mobile">Hide chat window on mobile <span data-tooltip="Hide chat window for visitors browsing your store from mobile." data-tooltip-position="top"><div class="question_mark"></div></span></label>
          <select id="livechat_mobile" class="advanced_options" name="livechat_mobile" style="margin-left: 13px; width: 60px;">
            <option value="Yes">Yes</option>
            <option value="No" selected>No</option>
          </select>
        </div>
      </div>

      <p>Need help? Check out our <a href="https://www.livechatinc.com/kb/drupal-add-livechat-website/?utm_source=drupal.org&utm_medium=integration&utm_campaign=drupal8integration" target="_blank">LiveChat for Drupal 8 integration tutorial</a>.</p>
      <p class="reset-settings">Something went wrong? <a class="reset-settings" href="#" id="reset_settings">Click here</a> to reset settings!</p>
    </div>
    <div style="text-align: center; width: 100%; height: 400px; max-width: 560px;">
      <div class="livechat_screenshot"></div>

      <p>Use our <a href="https://my.livechatinc.com?utm_source=drupal.org&utm_medium=integration&utm_campaign=drupal8integration" target="_blank">web application</a> or download <a href="https://www.livechatinc.com/applications/?utm_source=drupal.org&utm_medium=integration&utm_campaign=drupal8integration" target="_blank">the app</a> for desktop or mobile!</p>
    </div>
  </div>
</div>

File

templates/livechat-settings.html.twig
View source
  1. <div id="login_panel" style="display:flex; align-items: center;">
  2. <div style="display: flex; flex-direction: column; align-items: center; margin-bottom: 40px;">
  3. <div style="display: flex; flex-direction: row; align-items: center;">
  4. <div class="livechat_logo2"></div>
  5. </div>
  6. <div id="login_form">
  7. <div class="progress-button hidden">
  8. Saving...
  9. </div>
  10. <div>
  11. <iframe id="login-with-livechat" src="https://addons.livechatinc.com/sign-in-with-livechat"> </iframe>
  12. </div>
  13. </div>
  14. <div class="or-delimiter">or</div>
  15. <div id="livechat_link" style="font-size: 15px; margin-top:4px;">
  16. <a href="https://my.livechatinc.com/signup?utm_source=drupal.org&utm_medium=integration&utm_campaign=drupal8integration" target="_blank">create an account</a>
  17. </div>
  18. </div>
  19. <div style="text-align: center; width: 600px; height: 400px;">
  20. <div class="livechat_screenshot"></div>
  21. <p style="font-size:16px;">Check out our apps for <a href="https://www.livechatinc.com/applications/?utm_source=drupal.org&utm_medium=integration&utm_campaign=drupal8integration" target="_blank">desktop or mobile!</a></p>
  22. </div>
  23. </div>
  24. <div id="admin_panel" style="display:none;">
  25. <div class="region region-highlighted notification" style="visibility: hidden;">
  26. <div role="contentinfo" aria-label="Status message" class="messages messages--status">
  27. <h2 class="visually-hidden">Status message</h2>
  28. Settings have been saved!
  29. </div>
  30. </div>
  31. <div id="livechat_panel" style="display: flex; justify-content: space-around; align-items: center;">
  32. <div style="margin-top: 50px; max-width: 560px;">
  33. <h3>Your LiveChat is now ready!</h3>
  34. <div style="margin-bottom: -4px;">You are now rocking chat window from your <span id="livechat_login" style="font-weight: bold;"></span> account.</div>
  35. <div id="advanced_settings" class="details-wrapper">
  36. <div class="details-description"></div>
  37. <div class="js-form-item form-item js-form-type-select form-type-select">
  38. <label style="display: inline-block; vertical-align: 9%;" for="livechat_mobile">Hide chat window on mobile <span data-tooltip="Hide chat window for visitors browsing your store from mobile." data-tooltip-position="top"><div class="question_mark"></div></span></label>
  39. <select id="livechat_mobile" class="advanced_options" name="livechat_mobile" style="margin-left: 13px; width: 60px;">
  40. <option value="Yes">Yes</option>
  41. <option value="No" selected>No</option>
  42. </select>
  43. </div>
  44. </div>
  45. <p>Need help? Check out our <a href="https://www.livechatinc.com/kb/drupal-add-livechat-website/?utm_source=drupal.org&utm_medium=integration&utm_campaign=drupal8integration" target="_blank">LiveChat for Drupal 8 integration tutorial</a>.</p>
  46. <p class="reset-settings">Something went wrong? <a class="reset-settings" href="#" id="reset_settings">Click here</a> to reset settings!</p>
  47. </div>
  48. <div style="text-align: center; width: 100%; height: 400px; max-width: 560px;">
  49. <div class="livechat_screenshot"></div>
  50. <p>Use our <a href="https://my.livechatinc.com?utm_source=drupal.org&utm_medium=integration&utm_campaign=drupal8integration" target="_blank">web application</a> or download <a href="https://www.livechatinc.com/applications/?utm_source=drupal.org&utm_medium=integration&utm_campaign=drupal8integration" target="_blank">the app</a> for desktop or mobile!</p>
  51. </div>
  52. </div>
  53. </div>