Module Configuration

Module Configuration

Set the widget style, color scheme, widget logo, location, and animation.


Set the Shape, Color Theme, and Size of the Modules

  1. Log in to the platform.
  2. Scroll down to and click the Customize tab in the navigation menu.
  3. The App Customization page opens.
  4. Select the Container Theme:
    1. Default: Square apps with rounded edges. Additional apps are added horizontally (up to 3 apps). When four apps are active, the apps are stacked 2 by 2.
    2. Wallet: Rectangular modules with rounded edges and a "view more header" displaying other available apps.
  5. Expanded by default checkbox: If enabled, the app will load on your website in an expanded form to display all available apps stacked vertically. The widget can be collapsed by the website visitor by clicking on the exit (X) button and expanded later by clicking on the chevron (^) icon.
  6. Primary Brand Color: Choose from a HEX code of color options to determine the main color of the client's modules and buttons in the platform. 
  7. Font and Icon Color: Choose from a HEX code of color options to determine the font and icon color in the modules. 
  8. App Size: Reduce the size of the app as it is displayed on desktop browsers. Example: To reduce the app size by 10% of its overall size, select 90% from the drop-down menu. By default, the widget is set to Full Size.
  9. Click the Save button to save changes.
Note: Full-size apps are best for external monitors or extended screens.
Custom colors must be entered in HEX codes.

Change the Placement or Animation of the Modules

  1. Log in to the platform.
  2. Scroll down to and click the Customize tab in the navigation menu.
  3. The App Customization page opens.
  4. Scroll to the Desktop Position, Mobile Position, and Animation section.
  5. Choose the animation style or movement of the application.
    1. None: No movement.
    2. Bounce: A short vertical jump or bounce.
    3. Pulse: The app grows slightly then contracts. This animation happens one time.
    4. Rubber Band: App is stretched horizontally then snaps back to shape.
    5. Shake: The app vigorously shakes horizontally.
    6. Swing: App swings from a fixed center point like a door sign or swingset.
    7. Tada: The app shrinks slightly, then returns to its normal size while wiggling.
    8. Wobble: Similar to shake but is not as vigorous. This animation also adds a slight vertical height to imitate a wobble or waddle.
    9. Jello: The app is stretched on either side and contracts giving the impression of a jiggle.
    10. Heartbeat: Similar to pulse; however, the animation grows larger and pulses faster two times.
  6. Select the app position on the desktop browser page. If none is selected, the widget will appear on the top left.
    1. Top Left: The app will appear on the top left of the webpage.
    2. Top Right: The app will appear on the top right of the webpage.
    3. Bottom Left: The app will appear on the bottom left of the webpage.
    4. Bottom Middle: The app will appear on the bottom middle of the webpage
    5. Bottom Right: The app will appear on the bottom right of the webpage.
  7. Select the app position on the mobile browser page. 
    1. Top Left: The app will appear on the top left of the webpage.
    2. Top Right: The app will appear on the top right of the webpage.
    3. Bottom Left: The app will appear on the bottom left of the webpage.
    4. Bottom Middle: The app will appear on the bottom middle of the webpage.
    5. Bottom Right: The app will appear on the bottom right of the webpage.
  8. Click Save.

Web Content Accessibility Guidelines

Ensuring that the widget and the widget's color theme are accessible to those with impairments is of utmost importance. To verify that the colors chosen are within the Web Content Accessibility Guidelines standards, use the Ratio displayed below each HEX code or color choice. Once the ratio is displayed as green, the color choices are within the standards.

    • Related Articles

    • CRM/ILM Integration and Configuration Overview

      Configure CRM or ILM details to manage leads and appointments with ease. Email parsers deliver lead data in the form of a guest card to the CRM or ILM of choice. Leads often appear in an unmanaged or unreviewed queue to be manually managed and ...

    • Module Text

      Create custom calls-to-action that encourage customers to schedule an appointment or meeting. Example Image of the Upgraded Application Change the Text or Verbiage Displayed on the Scheduling Module Log in to the platform. Scroll down to and click ...

    • Module Title

      Customers find out immediately if they pre-qualify right from the company's website! Entice customers to submit their details and learn about the options available to them with an intriguing call to action. Create or Modify the Income Calculator ...

    • CLiQ: Onboarding Module

      This article will serve as a walkthrough for the Onboarding module in the CLiQ platform. For the purpose of this document, we will use the company Onboarding Company (RES), though it will be the same for all companies that will be onboarding within ...

    • Drive traffic to a particular offer or module

      There are multiple ways to present offers or information to your customers. Hyperlink: Modal or Pop-Up Window Use a hyperlink to present apps or modules in a modal or pop-up window in the center of the screen. If appending a URL containing UTMs with ...