Tips & Tricks: Operator Console Custom Code

Note: Console custom code is only available for the Self-Hosted Solution because you have access to the software files.
If you are familiar with JavaScript and PHP coding, there is a simple way to inject custom code to your operator chat console. Possibilities are endless with the ability to add your custom features, tweak the console or any other updates you have in mind. Upgrading your PHP Live! system will not affect your custom code because your code is located in a file that is not updated or overridden. Once you implement your custom code, it stays there forever, untouched with each software upgrades.
Here is what you will want to do.
  1. Create a new directory named custom_code inside your PHP Live! folder.
    example: phplive/custom_code/
  2. Create a new file named operator_console.php inside the custom_code/ directory.
    example: phplive/custom_code/operator_console.php
  3. Done! Place your custom JavaScript code, PHP code, HTML code or any other modifications and features you have in mind inside the operator_console.php file. When the operator console loads, it will also load the operator_console.php file.
Helpful variables and few examples.
  • PHP Example: Utilize the existing database connection to query your database. The PHP variable $dbh is the database connection that can be used to query and fetch data. For example, the following code will insert data into the table console_log. (note: The table console_log is an example table and is not a PHP Live! table.)
    <?php
    $now = time() ; // unixtime format
    $agent = isset( $_SERVER["HTTP_USER_AGENT"] ) ? $_SERVER["HTTP_USER_AGENT"] : "" ;
    $query = "INSERT INTO console_log (logID, opID, created, user_agent) VALUES( NULL, $opid, $now, '$agent')" ;
    database_mysql_query( $dbh, $query ) ; // PHP Live! function that processes the query
    
    // if query is successful, $dbh['ok'] will be 1.
    // 0 (zero) indicates a query error.  The $dbh['error'] will contain the error message.
    if ( $dbh[ 'ok' ] )
    {
    	// if success, fetch recent 3 console log history
    	$query = "SELECT * FROM console_log WHERE opID = $opid LIMIT 3" ;
    	database_mysql_query( $dbh, $query ) ;
    
    	$loginfo_array = Array() ;
    	while ( $loginfo = database_mysql_fetchrow( $dbh ) )
    		$loginfo_array[] = $loginfo ;
    }
    ?>
    
  • JavaScript Example: When the console loads, it will automatically display a sound check notice. The following example JavaScript code will alert a message when the sound check notice has been closed. It is a good idea to perform JavaScript actions AFTER the sound check interaction. Utilize any of the existing JavaScript variables that are available in the operator console to perform your custom features. (note: The data-cfasync="false" in the JavaScript tag is recommended if you use CloudFlare.)
    <script data-cfasync="false" type="text/javascript">
    $(document).ready(function(){
    	$('#div_sound_interaction_message_btn').click(function () {
    		alert( "Hello world!" ) ;
    	});
    });
    </script>
    
  • HTML Example: The following example will place a div at the bottom right corner of the operator console. If wanting to place floating divs, start with z-index of 500 to ensure the div shows up on the console and not behind other divs.
    <div style="position: absolute; bottom: 0px; right: 0px; width: 200px; height: 300px; z-index: 500;" class="info_box">
    	Hello world!
    </div>
    
Live Example
To see a working example of the operator console custom code in action, check out the live demo. The chat icon and the animation to the chat icon are custom code, mixture of JavaScript and HTML custom code inside the operator_console.php file. The original operator console code has not been altered. The console simply loads the extra code from the operator_console.php file (the chat icon and the animation).
Important: The ability to inject custom code to the operator console was introduced with PHP Live! v.4.7.9.9.9.3 (released May 2019). Make sure your PHP Live! is the latest version if wanting to add custom code to the operator console. The latest version can be downloaded at the client area.
Mobile App and Operator Console Custom Code
Note: If you utilize the Mobile App, the extra code will also be loaded on the Mobile App. If you want the extra code to only load for desktop, not on the Mobile App, use the existing PHP variable $mapp or JavaScript variable mapp.
  • PHP Example: The following example will place a div at the bottom right corner of the operator console if they are logged in from a deskop computer. The div will not be displayed if they are logged in from the Mobile App.
    <?php
    // $mapp = 1 indicates logged in from the Mobile App
    // $mapp = 0 indicates logged in on desktop
    if ( !$mapp ): ?>
    <div style="position: absolute; bottom: 0px; right: 0px; width: 200px; height: 300px; z-index: 500;" class="info_box">
    	Hello world!
    </div>
    <?php endif ; ?>
    
  • JavaScript Example: The following example will alert a message if they are logged in from a deskop computer.
    <script data-cfasync="false" type="text/javascript">
    $(document).ready(function(){
    	if ( !mapp )
    		alert( "You are logged in from a desktop computer." ) ;
    });
    </script>
    
  • Tips & Tricks
    • CSS Open Chat - Reference the open chat function using CSS class within the span, div or link.
    • Custom Variables - Pre-populate the name, email and question or send your custom variables to the chat request window.
    • Chat Icon Callbacks - Process your custom JavaScript code when the chat icon has loaded, has been clicked and more.
    • Transcript Action - When the chat session ends, process your custom PHP code to performan your custom actions.