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.

 

Here are the ways to install CINNOX Widget and the CTA in 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 in to your Drupal Administrator Dashboard.

18501850
  • On the Main dashboard page, click on the Extend tab.
  • On the List tab that will appear, click + Add new module
15021502
  • On the Add new module page that will appear, click Choose file and select the CINNOX file (.zip or .tar.gz) you have downloaded in your local machine.
  • Click Continue.
873873

The update manager page should be displayed with Files were added successfully message.

22442244
  • On the Main Dashboard page, click on the Extend tab. Scroll down the page and find the UTILITY section and tick the checkbox for CINNOX.
963963
  • On the Main Dashboard page, click on the Configuration tab. Scroll down the page and find the WEB SERVICES section and click CINNOX.
14701470
  • On the CINNOX settings page, enter your CINNOX service account e.g. abc.cinnox.com.
  • Click Save Configuration.
12101210
  • Refresh your website. The CINNOX widget should appear at the bottom right corner.
832832

You may also click on Launch CINNOX Dashboard to open your CINNOX Dashboard on your browser.

If you haven't signed up for a CINNOX service yet, go to the CINNOX website and register for one.

 

Install CINNOX Widget via Drupal Custom Block

  • Log in to your Drupal Administrator Dashboard.
18501850
  • Navigate to Structure then click Block layout.
20822082
  • 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.
20802080
  • Click + Add custom block in the pop-up window.
19661966
  • On the Add custom block page, add Block description. It can be any description, e.g., CINNOX Widget.
20702070
  • On the Text format, select Full HTML.
  • On the Body, select Source.
20502050
  • Log in to your CINNOX Web Dashboard.
11061106
  • Navigate to Administration > Widget > Installation. From the Widget Installation > Web Widget, click on Copy.
10491049
  • Back on your Drupal Add Custom Block > Body, paste your CINNOX Widget code in the code snippet box. Please ensure Source has been clicked.
20462046
  • Click Save located at the bottom of the page.
20862086
  • On the Configure block* page, untick the Display title** for the Title.

  • Check the Visibility section of your Pages, Roles, 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.

20762076
  • In the Block layout page, click Save blocks. A confirmation will display that the blocks have been updated.
20782078
  • Refresh your website. The CINNOX widget should appear at the bottom right corner.
832832

 

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

 

Create Custom Block for CINNOX CTA

  • Log in to your Drupal Administrator Dashboard.
18501850
  • Navigate to Structure then click Block layout.
20822082
  • 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.
19701970
  • Click + Add custom block in the pop-up window.
19441944
  • On the Add custom block page, add Block description. It can be any description, e.g., CINNOX Call CTA.
19421942
  • On the Text format, select Full HTML.
  • On the Body, select Source.
19581958
  • Log in to your CINNOX Web Dashboard.
11061106
  • 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.

Refer to Adding Click-to-Action (CTA) Buttons to know more about how to create a CTA in the CINNOX Dashboard.

23582358

Example CTAs

  • On your Drupal Add Custom Block > Body, add the CTAs in the Source

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>
19441944
  • Click Save.
19561956
  • On the Configure block* page, untick the Display title** for the Title.

  • Check the Visibility section of your Pages, Roles, Content type and Vocabulary.
    The CINNOX CTA will be available according to the selected block layout.

  • 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.

19641964
  • In the Block layout page, click Save blocks. A confirmation will display that the blocks have been updated.
19601960
  • 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.
10501050

 

📘

Learn More of CINNOX Widget


Did this page help you?