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.
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. 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. With the combination of JavaScript, Event Listeners, setTimeout, and PHP code, just about any custom feature you can think of can be created.
Helpful variables and few code examples.
  • PHP Code 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 Code 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 Code 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>
    
Mobile App and Operator Console Custom Code
Note: If you utilize the Mobile App, the extra code will also load on the Mobile App console. If you want the extra code to only load for desktop, not on the Mobile App, use the existing PHP Live! variable $mapp or JavaScript variable mapp.
  • PHP Code Example: The following example will place a div at the bottom right corner of the operator console if they are logged in from the Mobile App. The div will not be displayed if they are logged in from a desktop computer.
    <?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">
    	You are logged in from the Mobile App.
    </div>
    <?php endif ; ?>
    
  • JavaScript Code 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 the Mobile App." ) ;
    });
    </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.
    • 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.