Drupal is a free and open-source content management software distributed under the GNU General Public License (GPL) terms. Its flexible modules help users build versatile content and create integrated digital frameworks. Drupal provides a backend framework for a wide range of websites worldwide--from personal blogs to corporate and government websites.

For more details about Drupal, visit the website at www.drupal.org

The CINNOX live chat and web call lets you instantly add call and chat functions on your Drupal site so you can promptly answer enquiries from your online visitors. It installs the CINNOX Widget on your page and lets you take advantage of the platform's core features without the need to do extensive manual configurations on your Drupal site.

 

Install CINNOX Widget via Drupal Extension

The following is a step-by-step guide to installing the CINNOX Widget on your Drupal-based website using the CINNOX extension.

  • Download CINNOX Extension on the Drupal Org site.
  • Log into your Drupal Administrator Dashboard.
  • On the main dashboard page, click on the Extend tab.
  • On the modules page that will appear, choose the CINNOX file you have downloaded in your local, then Continue
  • Click on Install.
  • On the main Dashboard page, click on the Configuration tab.
  • Scroll down and look for the Web Services section. Click on CINNOX.
  • Type in your CINNOX service.
  • If you haven't signed up for a CINNOX service yet, click on the link provided to go to the CINNOX website and register for one.
  • Click on Save. You may also click on Launch CINNOX Dashboard to open the Dashboard on your browser.
  • Refresh your website. The CINNOX widget should appear at the bottom right corner.

 

Install CINNOX Widget via Drupal Custom Block

  • Log in to your Drupal Administrator Dashboard.
  • Navigate to Structure then click Block layout.
  • Scroll down the Block List and find the Footer where to position your CINNOX widget (e.g. Footer first).
  • Click Place block located to the Footer.
  • Click + Add custom block in the pop-up window.
  • On the Add custom block page, add Block description. It can be any description, e.g., Widget.
  • On the Text format, select Full HTML.
  • On the Body, select Source.
  • Log in to your CINNOX Web Dashboard.
  • Navigate to Administration > Widget > Installation. From the Widget Installation > Web Widget, click on Copy.
  • Back on your Drupal Add Custom Block > Body, paste your CINNOX Widget code in the code snippet box. Please ensure Source has been clicked.
  • Click Save.
  • On the Configure block* page, untick the Display title**.
  • Check the Visibility section of your pages, role, content type and vocabulary.
    The CINNOX widget will be available to all your site pages and content type by default.
  • In the Region drop-down list, select the Footer (e.g. Footer first) similar to the Place block you have set in the first steps.
  • Click Save block. A confirmation will display that the blocks have been saved.
  • In the Block layout page, click Save blocks. A confirmation will display that the blocks have been updated.
  • Refresh your website. The CINNOX widget should appear at the bottom right corner.

 

Add CINNOX Click-to-Action (CTA) via Drupal Custom Block

A CTA button is an HTML5 button in your website that you can configure to trigger the following actions in the CINNOX web client without clicking on the Widget:

  • Open the CINNOX Directory
  • Make a call or chat enquiry to a particular tag

Preconditions:

  • You have to create your CTAs in your CINNOX Web Dashboard
  • Then, you must install the CINNOX Widget via the Drupal Custom Block with the updated code, including the created CTAs.
  • Please refer to Adding Click-to-Action (CTA) Buttons section of this Guide for more details.

 

Create Custom Block for CINNOX CTA

  • Log in to your Drupal Administrator Dashboard.
  • Navigate to Structure then click Block layout.
  • Scroll down the Block List and find the block where to position your CINNOX CTA (e.g. Sidebar first).
  • Click Place block located on the Sidebar.
  • Click + Add custom block in the pop-up window.
  • On the Add custom block page, add Block description. It can be any description, e.g., CTA.
  • On the Text format, select Full HTML.
  • On the Body, select Source.
  • Log in to your CINNOX Web Dashboard.
  • Navigate to Administration > Widget > Installation, from the Widget Installation > Web Widget, copy your CTA Button ID. If no CTA has been created yet, please create one first and copy the button ID after.
  • On your Drupal Add Custom Block > Body, add the CTAs.

See below examples for reference

<hr />
<p><span class="cta-demo-text" id="btn_web_widget">Trigger the Directory</span><br />
<button class="cta-demo-btn" id="btn_web_widget">Have Questions?</button></p>

<p>&nbsp;</p>

<hr />
<p><span class="cta-demo-text" id="btn-to-support-chat-cinnox">Trigger the Chat function of a Tag</span><br />
<button class="cta-demo-btn" id="btn-to-support-chat">24/7 Support - Chat with Us</button></p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<hr />
<p><span class="cta-demo-text" id="btn-to-support-call-cinnox">Trigger the Call function of a Tag</span><br />
<button class="cta-demo-btn" id="btn-to-support-call">Request Demo - Talk to an Expert</button></p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<hr />
<p>&nbsp;</p>
  • Click Save.
  • On the Configure block* page, untick the Display title**.
  • Check the Visibility section of your pages, role, content type and vocabulary.
    The CINNOX widget will be available to all your site pages and content type by default.
  • In the Region drop-down list, select the Footer (e.g. Footer first) similar to the Place block you have set in the first steps.
  • Click Save block. A confirmation will display that the blocks have been saved.
  • In the Block layout page, click Save blocks. A confirmation will display that the blocks have been updated.
  • Refresh your website. The CTA should appear at the selected block.
  • Click the CTA. It should trigger the CINNOX widget for the directory, Live Chat or Web Call for a specific tag.

Did this page help you?