Installation on Drupal Sites

Welcome to this step-by-step guide on how to configure the Hand Talk plugin in the Drupal environment. Before we begin, it is important to note which version is used in your environment; in this guide, we have two types of installations available (Drupal 7 and 10).

To perform the installation, you will need to have on hand: your token. The token is a unique key that allows the Hand Talk plugin to work correctly on your site. This token will be provided by a consultant from the Hand Talk team via email. Therefore, before proceeding with any installation steps, make sure you have already received your token.

Configuring the Hand Talk Plugin in Your Drupal 7 Project

• Start by opening your project folder in the development environment of your choice.
• Inside the project folder, locate and access the folder called themes. This folder contains all the themes available for your project.
• Now, you need to access the folder of the theme currently being used in your project. In our example, we are using the default theme called bartik.

• Inside the theme folder, look for the templates folder. This folder contains all the template files that define the visual structure of your theme.
• At this stage, you will need to edit the file responsible for building the page, called page.tpl. This file controls the overall structure of the page.
• Finally, you will need to insert the HandTalk plugin installation code into the footer construction structure. Here is the code you need to insert:

Without the plugin script

<?php if ($page['footer']): ?>
 <div id="footer" class="clearfix">
 <?php print render($page['footer']); ?>
</div> <!-- /#footer -->
<?php endif; ?>

With the plugin script

<?php if ($page['footer']): ?>
 <div id="footer" class="clearfix">
 <?php print render($page['footer']); ?>
 <script src="https://plugin.handtalk.me/web/latest/handtalk.min.js"></script>
 <script>
 var ht = new HT({
 token: "token"
 });
 </script>
</div>  <!-- /#footer -->
<?php endif; ?>

Configuring the Hand Talk Plugin in Your Drupal 10 Project

Attention: Before starting this step-by-step, it is important to clear the Drupal cache.

• Locate the folder where your Drupal project is stored on your system.
• Inside the project folder, you will find a folder called ‘core’. This folder contains the essential Drupal files.
• Inside the ‘core’ folder, locate and access the ‘themes’ folder. This folder contains all the themes available for your Drupal site.
• Inside the ‘themes’ folder, locate the folder of the theme currently active on your site. In our case, we were using the default theme ‘olivero’.

• Inside the theme folder, locate and access the ‘templates’. folder. This folder contains the template files that control the appearance of your site.
• Inside the ‘templates’, locate and access the ‘layout’ folder. This folder contains the layout files that control the structure of your site.
• Inside the ‘layout’ folder, locate and open the ‘page.html’ file for editing. This file controls the page structure of your site.
• In the ‘page.html’ file, locate the footer section and insert the HandTalk plugin installation code. This will allow the plugin to load on all pages of your site.

Without the plugin script

<footer class="site-footer">
      <div class="site-footer__inner container">
        {{ page.footer_top }}
        {{ page.footer_bottom }}
      </div>
      </footer>
      <div class="overlay" data-drupal-selector="overlay"></div>
   </div>
</div>

With the plugin script

<footer class="site-footer">
      <div class="site-footer__inner container">
        {{ page.footer_top }}
        {{ page.footer_bottom }}
      </div>
      <script src="https://plugin.handtalk.me/web/latest/handtalk.min.js"></script>
 <script>
   var ht = new HT({
    token: "token"
 });
 </script>
      </footer>
      <div class="overlay" data-drupal-selector="overlay"></div>
   </div>
</div>

And that's it! You have now successfully configured the Hand Talk plugin in your project. Remember to replace "token" with the actual token provided by the Hand Talk consultant.

I hope this tutorial has been helpful to you. If you have any further questions, feel free to contact us.