Pass user role to javascript code inside body

Question

I know this question has been answered before, but it's not exactly the info I am looking for.

Right now I am developing a chatbot for a client. I am kind of new to web development, but especially to wordpress (this is what the client is using).

The chatbot is added to the pages using the Insert Headers and Footers plugin from wordpress. I add it to the header. But I guess it would also work in the body.

Given that I don't know PHP/Wordpress, I don't know how I could pass the user role to the bot, so it would offer support only to certain user roles.

I know there are some php functions (is_user_loggedin, or wp_get_current_user) but I don't know how to actually run these.

I tried adding them between script tags like below to at least try to dump the info to the browser console, but it didn't work..

<script>

<?php
$user = wp_get_current_user();
var_dump($user);
?>

</script> 

This is how I add the chatbot to the website: I add the following to the Header of the app using the previously mentioned plugin.

<script>!(function () {
  let e = document.createElement("script"),
    t = document.head || document.getElementsByTagName("head")[0];
  (e.src =
    "https://cdn.jsdelivr.net/npm/[email protected]/lib/index.js"),
    // Replace 1.x.x with the version that you want
    (e.async = !0),
    (e.onload = () => {
      window.WebChat.default(
        {
          params: { storage:"session"},
          title: "TestBot",
          initPayload: 'hello',
          customData: { language: "en" },
          socketUrl: "https://testlink.com",
          inputTextFieldHint: "Ask question here",
          // add other props here
        },
        null
      );
    }),
    t.insertBefore(e, t.firstChild);
})();
</script>

I am trying to pass the user role to the initPayload attribute. But I am really having trouble here understanding how to actually run and store the result of the php code.

I would really appreciate some help!

Answer 1

To my understanding the mentioned plugin is intended for adding either css or js to the site's header, body or footer, not PHP.

I would recommend creating a custom plugin for integrating your custom script on the site. This way you're not depending on other plugins and you have complete control on how and when the script is added to the site.

You can learn more about creating a custom plugin from the WP Dev docs, Plugin Basics.

In your custom plugin you could then add the script conditionally based on the user and one's role. Simple example below. Uncomment if statements, or add more, as needed.

add_action( 'wp_head', 'my_maybe_add_chatbot' );
function my_maybe_add_chatbot() {

  // only logged in users?
  // if ( ! is_user_logged_in() ) {
  //   return;
  // }

  // Only certain role
  // $user = wp_get_current_user();
  // $allowed_role = 'some_role';
  // if ( ! in_array( $allowed_role, (array) $user->roles ) ) {
  //   return;
  // }

  // other guards..

  my_print_chatbot_script();
}

function my_print_chatbot_script() {
  ?>
  <!-- script here -->
  <?php
}

You can of course leave out the PHP if statements, always print the script, and just print the roles in the middle of the script. But I don't think this is a clean way to do things.

add_action( 'wp_head', 'my_print_chatbot_script_with_role' );
function my_print_chatbot_script_with_role() {
  $user = wp_get_current_user();
  ?>
  <script>
    // script...
    title: "TestBot",
    initPayload: <?php echo (array) $user->roles[0]; ?>,
    customData: { language: "en" },
    // script...
  </script>
  <?php
}

Third option is to put the script into a separate js file and enqueue it with PHP. Then inline the role data to be used in the main script file.

add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts' );
function my_enqueue_scripts() {
  $user = wp_get_current_user();
  
  wp_enqueue_script(
    'my-script',
    plugin_dir_url( __FILE__ ) . '/js/script.js',
    array(),
    '1.0.0',
    true
  );

  // access in js console.log( MY_SCRIPT_USER_ROLES );
  wp_add_inline_script(
    'my-script', 
    'const MY_SCRIPT_USER_ROLES = ' . json_encode( (array) $user->roles ), 
    'before'
  );
}