Webflow

Add live chat and call to your site to connect with your visitors.

Webflow, Inc. is a software that provides as a service for website building and hosting. Their online visual editor platform allows users to design, build, and launch websites.

For more details, go to www.webflow.com.

 

The CINNOX live chat and web call lets you instantly add call and chat functions on your Webflow site so you can promptly answer enquiries from your online visitors. It installs the CINNOX Widget and Click-to-action (CTA) on your page and lets you take advantage of the platform's core features.

 

Installing CINNOX Live Chat and Live Call Widget in Webflow

Here are the steps to follow when adding the CINNOX web widget on your Webflow website:

  • Log in to your Webflow dashboard account.
14501450

Webflow Login Page

  • Go to your website's settings page.
24142414

Webflow Settings Page

  • Click on the Custom Code tab.
24722472

Webflow Custom Code

  • Log in to your CINNOX Web Dashboard.
886886

CINNOX > Login Page

  • Navigate to Administration > Widget > Installation. From the Widget Installation > Web Widget, click on Copy.
10441044

CINNOX Admin > Widget > Installation

  • Back on your Webflow under the Head Code, paste your CINNOX Widget code.
    If there are already existing code in the Head Code, paste the CINNOX Widget code before or after the existing code.
24742474

Webflow Head Code

  • Click on Save Changes, located at the bottom right part corner of the page.
24742474

Webflow Head Code Save Changes

  • Click on Publish, located at the upper right corner of the page.
24742474

Publish Webflow Site with CINNOX Widget

  • Open your published website. The CINNOX Widget should appear at the bottom right corner.
668668

Webflow Site with CINNOX Widget

From now on, your visitors will be able to reach out to you through live chat and call on your Webflow website.

 

📘

For more information on configuring your CINNOX widget appearance, refer to this Guide's Customising Your Widget's Appearance section.

📘

To know how to change the widget position from right to left, refer to this Guide's Dynamic Change of Installed Widget section.

 

Adding CINNOX Click-to-Action (CTA) in Webflow

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

  • Log in to your Webflow dashboard account.

  • Open your website > Designer view.

11551155
  • Go to Pages and find the page you want to add CTA, e.g. Contact Us page.
20802080
  • Find and click UI component/element, e.g. button, text, image, and others on the selected page .
  • On the right side of the page, click the Settings icon, and the ID with placeholder For in-page linking should appear
22782278
  • Log in to your CINNOX Web Dashboard.
  • Navigate to Administration > Widget > Installation, from the Widget Installation > Web Widget, copy the CTA Button ID.

If no CTA button has been created, create one first and copy the button ID afterwards.
Refer to Adding Click-to-Action (CTA) Buttons to know more about how to create a CTA in the CINNOX Dashboard.

See below CTA Button ID examples for reference

22102210
  • Back to your Webflow, paste the CTA button ID to the ID of your UI component. Please ensure the button ID is saved.
22742274
  • Repeat the same steps above if you want to create more CTA. Please test it out on your website when published.
668668

 

📘

To know how to hide the CINNOX Widget and just the CTAs on the website, refer to this Guide's
Hiding or Disabling the Web Widget
section.