Merge pull request #693 from jeffswartz/ECO-5684

Robert Hainer · web-flow · commit d6bb200464c2 · 2020-11-02T08:23:34.000-08:00
ECO-5684 -- Support landing page UI config options
diff --git a/CUSTOMIZING-UI.md b/CUSTOMIZING-UI.md
@@ -24,6 +24,19 @@ The `web/` directory in the project root is mounted as a static path in the appl
 
 You can put your images in the `web/images` directory. They can be accessed in the application as `/images/`. For example, the file `web/images/opentok-logo.png` can be accessed in the browser as `/images/opentok-logo.png`.
 
+## Changing the app name, intro text, and Help links
+
+See the [Configuration options](README.md#configuration-options) section in the main README file.
+These can be configured with these settings:
+
+* `appName` (config.json) / `APP_NAME` (environment variable)
+* `introText` (config.json) / `INTRO_TEXT` (environment variable)
+* `helpLinkText1` (config.json) / `HELP_LINK_TEXT_1` (environment variable)
+* `helpLinkUrl1` (config.json) / `HELP_LINK_URL_1` (environment variable)
+* `helpLinkText2` (config.json) / `HELP_LINK_TEXT_2` (environment variable)
+* `helpLinkUrl2` (config.json) / `HELP_LINK_URL_2` (environment variable)
+
 ## Changing landing page HTML
 
 Edit the view file [`views/index.ejs`](views/index.ejs) and change the images and text in the `<body>` section. You can also change the text in the `<title>` tag.
+
diff --git a/README.md b/README.md
@@ -566,6 +566,27 @@ To configure this, edit options in the config/config.json file or set environmen
 
 ### Additional configuration options
 
+* `appName` (config.json) / `APP_NAME` (environment variable) -- The name of the application
+  displayed in the precall widget, in the top of the room page, and in the end (/thanks) page.
+  The default value is 'Vonage Video Conferencing'.
+
+* `introText` (config.json) / `INTRO_TEXT` (environment variable) -- The text displayed under
+  the application name in the precall widget. The default value is 'Welcome to Video Conferencing'
+
+* `helpLinkText1` (config.json) / `HELP_LINK_TEXT_1` (environment variable) -- The text
+  for the first help link displayed after "Need help?" at the top of the precall widget.
+  If you do not set this option, the "Need help" section is omitted.
+
+* `helpLinkUrl1` (config.json) / `HELP_LINK_URL_1` (environment variable) -- The URL for
+  the first help link the precall widget.
+
+* `helpLinkText2` (config.json) / `HELP_LINK_TEXT_2` (environment variable) -- The text
+  for the second help link displayed after "Need help?" at the top of the precall widget.
+  If you do not set this option, second help link is omitted.
+
+* `helpLinkUrl2` (config.json) / `HELP_LINK_URL_2` (environment variable) -- The URL for
+  the second help link the precall widget.
+
 * `showTos` (config.json) / `SHOW_TOS` (environment variable) -- Whether the app will display the terms of service
   dialog box and require the user to agree to the terms before joining a room. The default value is `false`.
 
diff --git a/config/example.json b/config/example.json
@@ -45,6 +45,12 @@
   "maxUsersPerRoom": 0,
   "enableRoomLocking": true,
   "autoGenerateRoomName": true,
+  "appName": "Vonage Video Conferencing",
+  "introText": "Welcome to Video Conferencing.",
+  "helpLinkText1": "",
+  "helpLinkUrl1": "",
+  "helpLinkText2": "",
+  "helpLinkUrl2": "",
   "adobeTracking": {
     "url": "",
     "primaryCategory": "",
diff --git a/server/serverConstants.js b/server/serverConstants.js
@@ -176,6 +176,18 @@ E.BLACKLIST = { envVar: 'BLACKLIST', jsonPath: 'blacklist', defaultValue: '' };
 
 E.MEDIA_MODE = { envVar: 'MEDIA_MODE', jsonPath: 'mediaMode', defaultValue: 'routed' };
 
+E.INTRO_TEXT = { envVar: 'INTRO_TEXT', jsonPath: 'introText', defaultValue: 'Welcome to Video Conferencing.' };
+
+E.APP_NAME = { envVar: 'APP_NAME', jsonPath: 'appName', defaultValue: 'Vonage Video Conferencing' };
+
+E.HELP_LINK_TEXT_1 = { envVar: 'HELP_LINK_TEXT_1', jsonPath: 'helpLinkText1', defaultValue: '' };
+
+E.HELP_LINK_URL_1 = { envVar: 'HELP_LINK_URL_1', jsonPath: 'helpLinkUrl1', defaultValue: '' };
+
+E.HELP_LINK_TEXT_2 = { envVar: 'HELP_LINK_TEXT_2', jsonPath: 'helpLinkText2', defaultValue: '' };
+
+E.HELP_LINK_URL_2 = { envVar: 'HELP_LINK_URL_2', jsonPath: 'helpLinkUrl2', defaultValue: '' };
+
 E.ADOBE_TRACKING_URL = { envVar: 'ADOBE_TRACKING_URL', jsonPath: 'adobeTracking.url', defaultValue: '' };
 
 E.ADOBE_TRACKING_PRIMARY_CATEGORY = { envVar: 'ADOBE_TRACKING_PRIMARY_CATEGORY', jsonPath: 'adobeTracking.primaryCategory', defaultValue: '' };
diff --git a/server/serverMethods.js b/server/serverMethods.js
@@ -196,6 +196,12 @@ function ServerMethods(aLogLevel, aModules) {
       const hotjarVersion = config.get(C.HOTJAR_VERSION);
       const enableFeedback = config.get(C.ENABLE_FEEDBACK);
       const autoGenerateRoomName = config.get(C.AUTO_GENERATE_ROOM_NAME);
+      const introText = config.get(C.INTRO_TEXT);
+      const appName = config.get(C.APP_NAME);
+      const helpLinkText1 = config.get(C.HELP_LINK_TEXT_1);
+      const helpLinkUrl1 = config.get(C.HELP_LINK_URL_1);
+      const helpLinkText2 = config.get(C.HELP_LINK_TEXT_2);
+      const helpLinkUrl2 = config.get(C.HELP_LINK_URL_2);
 
       roomBlackList = config.get(C.BLACKLIST)
         ? config.get(C.BLACKLIST).split(',').map((word) => word.trim().toLowerCase()) : [];
@@ -259,6 +265,12 @@ function ServerMethods(aLogLevel, aModules) {
         mediaMode,
         enableEmoji,
         autoGenerateRoomName,
+        introText,
+        appName,
+        helpLinkText1,
+        helpLinkUrl1,
+        helpLinkText2,
+        helpLinkUrl2,
       };
     });
   }
@@ -313,6 +325,7 @@ function ServerMethods(aLogLevel, aModules) {
       userLanguage: language,
       userCountry: country,
       useGoogleFonts: aReq.tbConfig.useGoogleFonts,
+      appName: aReq.tbConfig.appName,
     }, (err, html) => {
       if (err) {
         logger.error('getMeetingCompletion. error: ', err);
@@ -430,6 +443,12 @@ function ServerMethods(aLogLevel, aModules) {
           opentokJsUrl: aReq.tbConfig.opentokJsUrl,
           enablePrecallTest: aReq.tbConfig.enablePrecallTest,
           enterButtonLabel: 'Start Meeting',
+          introText: aReq.tbConfig.introText,
+          appName: aReq.tbConfig.appName,
+          helpLinkText1: aReq.tbConfig.helpLinkText1,
+          helpLinkUrl1: aReq.tbConfig.helpLinkUrl1,
+          helpLinkText2: aReq.tbConfig.helpLinkText2,
+          helpLinkUrl2: aReq.tbConfig.helpLinkUrl2,
         }, (err, html) => {
           if (err) {
             logger.error('getRoot. error: ', err);
@@ -523,6 +542,12 @@ function ServerMethods(aLogLevel, aModules) {
             enableFeedback: tbConfig.enableFeedback,
             enterButtonLabel: 'Join Meeting',
             routedFromStartMeeting: Boolean(routedFromStartMeeting),
+            introText: tbConfig.introText,
+            appName: tbConfig.appName,
+            helpLinkText1: tbConfig.helpLinkText1,
+            helpLinkUrl1: tbConfig.helpLinkUrl1,
+            helpLinkText2: tbConfig.helpLinkText2,
+            helpLinkUrl2: tbConfig.helpLinkUrl2,
             // eslint-disable-next-line no-dupe-keys
             userName,
           }, (err, html) => {
diff --git a/views/endMeeting.ejs b/views/endMeeting.ejs
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <title>Thanks for using Vonage Free Conferencing!</title>
+    <title>Thanks for using <%= appName %>!</title>
     <meta charset="UTF-8">
     <meta http-equiv="content-type" content="text/html;charset=UTF-8">
     <meta http-equiv="X-UA-Compatible" content="chrome=1">
@@ -37,7 +37,7 @@
            <a href="https://vonage.com" title="Vonage" target="_blank" rel="noopener">
             <img id="logo" src="../images/vonage-logo-no-text.svg" alt="vonage transparent logo">
           </a>
-              <p>Thanks for using<br>Vonage Free Conferencing!</p>
+              <p>Thanks for using<br><%= appName %>!</p>
           </header>
         <div class="endMeeting-box-container">
           <div class="endMeeting-box">
diff --git a/views/index.ejs b/views/index.ejs
@@ -3,7 +3,9 @@
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-    <title>Vonage Free Conferencing</title>
+    <title>
+      <%= appName %>
+    </title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
     <meta name="apple-mobile-web-app-capable" content="yes"/>
     <meta
@@ -53,6 +55,12 @@
       window.precallApiKey='<%=precallApiKey%>';
       window.precallSessionId='<%=precallSessionId%>';
       window.precallToken='<%=precallToken%>';
+      window.introText='<%=introText%>';
+      window.appName='<%=appName%>';
+      window.helpLinkText1='<%=helpLinkText1%>';
+      window.helpLinkUrl1='<%=helpLinkUrl1%>';
+      window.helpLinkText2='<%=helpLinkText2%>';
+      window.helpLinkUrl2='<%=helpLinkUrl2%>';
       window.autoGenerateRoomName=<%=autoGenerateRoomName%>;
     </script>
 
diff --git a/views/room.ejs b/views/room.ejs
@@ -6,7 +6,7 @@
     <% if(iosAppId) { %>
       <meta name="apple-itunes-app" content="app-id=<%=iosAppId%>, app-argument=<%=iosURL%>">
     <% } %>
-    <title>Vonage Free Conferencing</title>
+    <title><%= appName %></title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover'"/>
     <meta name="apple-mobile-web-app-capable" content="yes"/>
 
@@ -71,6 +71,12 @@
       window.autoGenerateRoomName = <%=autoGenerateRoomName%>;
       window.publishAudio = <%=publishAudio%>;
       window.publishVideo = <%=publishVideo%>;
+      window.introText='<%=introText%>';
+      window.appName='<%=appName%>';
+      window.helpLinkText1='<%=helpLinkText1%>';
+      window.helpLinkUrl1='<%=helpLinkUrl1%>';
+      window.helpLinkText2='<%=helpLinkText2%>';
+      window.helpLinkUrl2='<%=helpLinkUrl2%>';
       var isMobile = function() { return window.matchMedia("only screen and (max-width: 480px)").matches; }
 
       var mobileSettings = function() {
@@ -132,7 +138,7 @@
         <div class="room-info">
           <div class="name-wrapper">
             <i id="room-locked-state" data-icon="closedLock" title="This room is locked. No additional participants may join the room."></i>
-            <p class="room-name">Vonage Video Conferencing</p>
+            <p class="room-name"><%= appName %></p>
           </div>
           <div class="participants-wrapper">
             <i data-icon="participants"></i><span id="participantsStr"></span>
diff --git a/web/templates/precall.ejs b/web/templates/precall.ejs
@@ -5,12 +5,16 @@
         <img src="/images/vonage-logo-no-text.svg" alt="Vonage logo">
       </a>
       <h2>
-        Vonage
-        <br>
-        Free Conferencing
+        <% if (appName === "Vonage Free Conferencing") { %>
+          Vonage
+          <br>
+          Free Conferencing
+        <% } else { %>
+          <%= appName %>
+        <% } %>
       </h2>
       <p>
-        Host free group video calls with friends, family, teammates&mdash;anyone!
+        <%=introText%>
       </p>
     </header>
     <footer>
@@ -19,7 +23,18 @@
 </div>
 <div id="righthand-container" class="user-name-modal">
   <div class="landing-more-info">
-    Need help? <a href="Vonage-Free-Conferencing-help.pdf" target="_blank">Read our FAQs</a>
+    <% if (helpLinkText1) { %>
+      Need help?
+        <% if (helpLinkText1 && helpLinkUrl1 ) { %>
+          <a href="<%= helpLinkUrl1 %>" target="_blank"><%= helpLinkText1 %></a>
+        <%
+           }
+           if (helpLinkText2 && helpLinkUrl2 ) {
+        %>
+          /
+          <a href="<%= helpLinkUrl2 %>" target="_blank"><%= helpLinkText2 %></a>
+        <% } %>
+    <% } %>
   </div>
   <form method="post">
     <div id="video-preview">
