Webflow Components
  • PDF

Webflow Components

  • PDF

The Add  Section

The following sections describe the Add section of a Webflow.

What is the Add Section?

The Add section contains all the components you can add to the canvas to build a Webflow. Components are added by dragging them onto the canvas or by clicking them. 

NOTE
The initial look and feel of every component in the Add section is set via the selected theme of the Webflow. For additional information, see the Theme Overview article. 
NOTE

This article describes only the most widely used global components.

Add Section Structure

Figure 1 and Table 1 describe the structure of the Add section.

Figure 1: Add Section

Table 1: Add Section

Number

Name

Description

Search Bar

Enables the search for components by name within a section

Containers

Contains the following components:

  • Container
  • Grid

Pages & Sections

Contains the following components:

  • Greeting Page
  • Main Section
  • Main Page

Buttons

Contains the Form Button component

Multiple Choice

Contains the following components:

  • Radio Question
  • Checkbox

Other

Contains the following components:

  • Text Input
  • Dynamic Image
  • Line Break (Br) Component
  • Running Number Indicator
  • Array Buttons
  • Upload Competent 
  • Progress Bar
  • Signature 
  • Date Input

Labels & Non Input

Contains the following components:

  • Preview
  • Rich Text

Payment Solutions

Contains the following components:

  • Stripe Payment
  • Car Claim Accident Map
  • Credit Guard
NOTE
The Payment Solutions components will appear according to customer settings, for additional information please contact our support team

Containers Components Description  

The Containers sub-section contains the following components:

  • Container - a component that contains other components. The Container is used in conjunction with other components like the Grid to ensure that content does not exceed a reasonable width for display. The Container is also used to group components together to apply visibility and editability conditions to them.
  • Grid - a framework that helps to arrange different components while maintaining a good visual balance.

Figure 2 displays a Container (1), containing a Grid (2) with four Text Input
components (3):

Figure 2: Container and Grid

NOTE
An empty container will prevent the digital process from being deployed. For additional information see the Deploying and Viewing a Digital Process article.

Page & Section Components Description  

The Page & Sections sub-section contains the following components:

  • Greeting Page - a welcome page that your customers see when they interact with a digital process. It usually contains a text message which tells them what they are about to do and a button that they can click to continue with the rest of the process. The Greeting Page is the first chance for customers to experience the look and feel of your digital process.
NOTE
Other components, except for the Main Page, can also be placed above the Greeting Page.

Figure 3 displays an example of a Greeting Page (1) with a Rich Text component (2) and a Form Button Component (3):

Figure 3: Greeting Page

NOTE
The Greeting Page can also be placed at the end of the Webflow,  for instance, to display a short summary or a goodbye message.
  • Main Section - a component that provides the ability to split Main Pages when displaying a digital process on mobile devices. One Main section splits a Main page into two and two Main Sections split a Main Page into three pages and so on. The title of each Main Section is visible only on mobile devices.
  • Main Page - a gateway to the content, functionality, and logic of the Webflow and the overall Webflow design.
    A Webflow must contain at least one Main Page. All other components are added above the Main Page (except for the Greeting Page component).
    The Main Page has two built-in Form Button components (for additional details, see the Buttons Components Description section) that will become visible once they are configured through the Properties section. The Main Page also contains a built-in Co Browsing option that enables customers or agents to send a link of the digital process via email to receive/provide real-time remote assistance. The customer and the agent will be able to browse the digital process online together and input information when required.

Figure 4 displays a Main Page (1) with two main sections. The first Main Section component (2) contains a Grid (3) with four Text Input components (4). The second Main Section component (5) contains a multiple choice Radio Question component (6):

Figure 4: Main Page and Sections

Figure 5 displays a Main Page of a published Webflow. The Main Page contains a Co-Browsing button (1) and the Email input field (2) that appears when clicking it. The Main Page also contains two built-in form buttons (3): 

Figure 5: Main Page with Co Browsing and Form Buttons

Buttons Component Description  

The Buttons sub-section contains the Form Button component. This component allows customers to perform different actions such as:

  • Navigate forward
  • Navigate back
  • Submit information 

Figure 6 displays a Main Page (1) with four Text Inputs (2) located inside of a Grid (3) and a Form Button (4) configured to submit the information from the Text Input components:

NOTE

The functionality of the Form Buttons is set through the Properties Section, for additional information see the Pages and Sections Components Properties article.

Figure 6: Form Button

Multiple Choice Components Description  

The Multiple Choice components sub-section contains the following components: 

  • Checkbox - presents the customer with a range of options, from which the customer can select. Within a group of Checkboxes, each operates individually, so the customer can check or uncheck options independently. The Checkbox has two states that return a value. When checked the returned value is true and when unchecked the returned value is false.
  • Radio Questions - radio button groups, in contrast to checkbox groups, limit the choice of the customer to just one option from the range provided. A Radio Question item has two states, selected and non-selected. When selected, a value is returned. The value is defined through the Properties section.

Figure 7 displays a Main Page (1) with four Checkbox components (2) and a Radio Question component with four options (3): 

Figure 7: Checkboxes and Radio Question

Other Components Description  

The Other components sub-section contains the following components: 

  • Text Input - by default, this component enables customers to input textual information while interacting with the digital process. Using the Model Values feature, the component can automatically display pre-populated data, when using an expression for example, or display information through an autocomplete function.
NOTE
For additional information about the Model Values, see the Values article.
  • Dynamic Image - this component is used for uploading images. Often used for Uploading a logo image.
NOTE

Images must first be uploaded to the theme selected in the Webflow, for additional information please contact our support team.

  • Br Component - this component creates spacing between other components.
  • Running Number Indicator - this component creates serial numbering for array items. 
NOTE
To learn how to use the Running Number Indicator component, see the Creating Arrays article. 
  • Array Buttons - the Array Buttons components enable the customer to perform the following actions:
    • Add More - add additional array items.
    • Remove - delete an array item. 

Figure 8 displays a Main Page (1) with a Dynamic Image displaying a logo (2), a Br Component (3) for spacing, a Container (4) containing a Running Number Indicator (5) within a Grid (6) that also contains two Text Input components (7), and Array Buttons (8).

Figure 8: Other Components Part 1

  • Upload Competent - this component is used for uploading different files as attachments.
NOTE

You can limit the types of uploaded files through the Properties section of the component, for additional information see the Other Components Properties article.

  • Progress Bar - this component visually displays the progression of a digital process.
  • Signature - this component enables customers to draw a graphic signature in their digital process.
  • Date Input - this component enables customers to enter a date.

Figure 9 displays a Main Page (1) with a Dynamic Image logo (2), a Progress Bar (2), a Grid (4) with a Date Input (5) and two Text Input components (6), a Signature (7), and an Upload Component:

Figure 9: Other Components Part 2

Labels & Non Input Components Description  

The Labels & Non Input sub-section contains the following components:

  • Preview - this component displays a preview of the PDF attached to the Webflow. 
NOTE
If the Preview component is not attached to a PDF form the digital process will not deploy. For additional information see the Creating and Defining a PDF and Deploying and Viewing a Digital Process articles.
  • Rich Text - this component enables you to add static text or variables to the Main Page and edit them. The Rich Text components editing options are:
    • Typographical emphasis (Bold, Italic, Underline, and Strikethrough)
    • Create lists (ordered/unordered)
    • Decrease/increase indent
    • Text direction
    • Font (type, size)
    • Style (normal or headings)
    • Adding variables 
    • Text and background color  
    • Line height 
    • Adding links
    • Clear format 
NOTE
The color of the text and the background can be selected from a color palette or from color defined in your theme. For additional information about the theme, contact our support team.  

Figure 10 displays a Main Page (1) with a Rich Text (3) with its options (2) and a Preview component (4).

Figure 10: Rich Text and Preview

Payment Solutions Components Description  

The Payment Solutions sub-section contains the following components:

  • Stripe Payment
  • Car Claim Accident Map
  • Credit Guard 
NOTE
The Payment Solutions components will appear according to customer settings, for additional information please contact our support team. 

Stripe Payments  

An integration of the Webflow with an online payment processing for internet businesses. To add the Stripe Payment component to a Webflow, the following configurations are required:

  • Preliminary Requirement - a Stripe account.
  • Backend Configurations - API information.
  • Properties Configurations.

Figure 11 displays a Main Page (1) with an added Stripe Payment component  (2):

Figure 11: Stripe Payment Component

NOTE

If the Stripe Payment component is not available, or if any assistance is required with adding it to a Webflow, please contact our support team.

Car Claim Accident Map

While using a digital process for car accident claims, in addition to filling in all the required information such as policy type and other driver details, the customer can use the Car Claim Accident Map to draw, visually display, and describe the steps and events that led to the accident. 

To add the Car Claim Accident Map component  to a Web Flow, some configurations to its Properties are required. To display the its image, a PDF must be added, defined, and attached to the Preview component (for additional information, see the Labels and Non Input Components Properties and the Creating and Defining a PDF articles). 

Figure 12 displays a Main Page (1) with an added Stripe Car Claim Accident Map component (2) and a second Main Page (3) with a Preview component (4):

Figure 12: Car Claim Accident Map Component

NOTE

If the Car Claim Accident Map component is not available, or if any assistance is required with adding it to a Webflow, please contact our support team.

Credit Guard

An integration of the Webflow with an additional payment processing over the Internet capability. To add the Credit Guard component to a Webflow, some configurations are required:

  • Preliminary Requirement - a gateway with personal details from Credit Guard
  • Backend Configurations - API information.
  • Properties Configurations.

Figure 13 displays a Main Page (1) with an added Credit Guard component (2):

Figure 13: Credit Guard Component

NOTE
If the option to add a Credit Guard component is not available, or if any assistance is required with adding it to a Webflow, please contact our support team.

The Properties Section

The following sections describe the Properties section of a Webflow.

What is the Properties Section?

The Properties section appears when components are added to the canvas of a Webflow. 

Each component has its own unique section with relevant properties. Properties are used to define different aspects of a component, for instance:     

  • Set up the look and feel of a component, such as: background picture, image, label text, alignment, height, width, and size.
  • Define functionality of From Buttons and values of Radio Question items.      
  • Connect between a Preview component and a PDF form.

Using the Properties section, you can delete components from the Webflow, add them to the Journey Sender (not covered in this article), and connect them to the Model (for additional information, see the Model Overview the Setting Up the Model articles).

Figure 14 displays the Properties section of a Dynamic Image Component: 

Figure 14: Dynamic Image Properties Section

The Properties Section and Model

(See Figure 15)

The Model is the backend of the digital process. Adding components to the canvas of a Webflow creates the structure of a digital process, but for a digital process to function, to be able to receive and display data, and to work in accordance with what you have defined and specified, the added components must be connected to the Model. Using the Model you can perform the following actions:

  • Select the field type of each component, for example string, object, or signature.
  • Set input methods such as manual user input or an autocomplete service.
  • Apply conditions.
  • Add validation rules.
  • Assign permissions. 

The connection between components and the Model is defined in the Properties Section, for example:

Figure 15: Model Field Connection

NOTE
To learn more about the Model, see the Model Overviewthe Model Implementation, and Setting Up the Model articles.

Was this article helpful?

What's Next