Difference between revisions of "User Interfaces"
(Add optin form to the user interfaces) |
|||
| Line 5: | Line 5: | ||
The landing page is the first page of the site where the user interacts with. To be able to do this, you first have to set up the front page of the WordPress site. [https://wpengine.com/resources/change-wordpress-font/#:~:text=Locate%20your%20themes%20editor%20by,is%20where%20fonts%20are%20defined.&text=More%20often%20than%20not%2C%20you,different%20areas%20on%20your%20site. See how to change the WordPress front page]. Choosing which tool to use for building the page is up to the user. for example Elementor, WP Bakery, etc. It is a necessity to add the variation ID and relevant product id you are promoting on the page to the front page meta description. see [[:File:DeepinScreenshot select-area 20220506084320.png|figure 1.2: Landing Page meta.]] Generally, this need to be applied to any product promo page created on the site. | The landing page is the first page of the site where the user interacts with. To be able to do this, you first have to set up the front page of the WordPress site. [https://wpengine.com/resources/change-wordpress-font/#:~:text=Locate%20your%20themes%20editor%20by,is%20where%20fonts%20are%20defined.&text=More%20often%20than%20not%2C%20you,different%20areas%20on%20your%20site. See how to change the WordPress front page]. Choosing which tool to use for building the page is up to the user. for example Elementor, WP Bakery, etc. It is a necessity to add the variation ID and relevant product id you are promoting on the page to the front page meta description. see [[:File:DeepinScreenshot select-area 20220506084320.png|figure 1.2: Landing Page meta.]] Generally, this need to be applied to any product promo page created on the site. | ||
[[File:DeepinScreenshot select-area 20220506084320.png|alt=Wp Landing page |thumb|Figure 1.2 Landing page Meta|none|441x441px]] | [[File:DeepinScreenshot select-area 20220506084320.png|alt=Wp Landing page |thumb|Figure 1.2 Landing page Meta|none|441x441px]] | ||
== Opt-in Form == | |||
[[File:Optin-form sample.png|alt=Optin form popup sample|thumb|Figure 1.3 : Opt-in Form Popup]] | |||
It is necessary to use an opt-in form in order to collect email addresses from users. This can be a page, part of a page or maybe a popup integrated with the opt-in-form [https://codex.wordpress.org/Shortcode_API shortcode]. This will integrate a small form to collect the email of the user and some additional details required to register the user to [https://earnware.com Earnware]. | |||
To integrate the form shown in figure 1.4, the following [https://codex.wordpress.org/Shortcode_API shortcode] must be used. It is possible to override the form style by changing the theme style. | |||
[opt_in_form] | |||
Additionally, users are allowed to change the default redirection path of the user registration process by adding the following attribute to the shortcode. Default will be the checkout page of the product | |||
[opt_in_form redirect_to="redirection path"] | |||
and also the page type which is checked during each page submission by the funnel plugin. Default will be the checkout page. There are several predefined page type to use. see [https://funnel-settings.seneview.com/index.php?title=Funnel_Settings#Enums Enums] | |||
[opt_in_form page_type="page type"] | |||
The attribute doesn't change the form's look, but it adds some hidden variables that will be needed for the next step. | |||
[[File:Optin-form.png|alt=Optin Form represented by the short code|none|thumb|Figure 1.4 : Shortcode HTML representation]] | |||
== Order Details Page == | == Order Details Page == | ||
[[File:Image2.jpg|thumb|602x602px|none]] | [[File:Image2.jpg|thumb|602x602px|none]] | ||
Revision as of 05:07, 6 May 2022
Landing Page
The landing page is the first page of the site where the user interacts with. To be able to do this, you first have to set up the front page of the WordPress site. See how to change the WordPress front page. Choosing which tool to use for building the page is up to the user. for example Elementor, WP Bakery, etc. It is a necessity to add the variation ID and relevant product id you are promoting on the page to the front page meta description. see figure 1.2: Landing Page meta. Generally, this need to be applied to any product promo page created on the site.
Opt-in Form
It is necessary to use an opt-in form in order to collect email addresses from users. This can be a page, part of a page or maybe a popup integrated with the opt-in-form shortcode. This will integrate a small form to collect the email of the user and some additional details required to register the user to Earnware.
To integrate the form shown in figure 1.4, the following shortcode must be used. It is possible to override the form style by changing the theme style.
[opt_in_form]
Additionally, users are allowed to change the default redirection path of the user registration process by adding the following attribute to the shortcode. Default will be the checkout page of the product
[opt_in_form redirect_to="redirection path"]
and also the page type which is checked during each page submission by the funnel plugin. Default will be the checkout page. There are several predefined page type to use. see Enums
[opt_in_form page_type="page type"]
The attribute doesn't change the form's look, but it adds some hidden variables that will be needed for the next step.
Order Details Page
Interface #2
Interface #3
Interface #4
Interface #5
Interface #6
Shortcodes
Legacy Shortcodes
Legacy shortcodes as of Funnel Settings version 2.1.0. These codes will be removed in a future release and will no longer work. This is for documentation purpose only.
A.[checkout_page]
B.[checkout_form_v2]
Modern Shortcodes
These are shortcodes that were introduced as of Funnel Settings version 2.1.x.
A.[checkout_form style=a]
B.[checkout_form style=b]
C.[checkout_form style=c]
D.[checkout_form style=d]
E.[checkout_form style=e]
F.[checkout_form style=f]
G.[checkout_form style=g]
H.[checkout_items style=a]
I.[checkout_items style=b]
J.[order_bumps]
K.[guarantees]
L.[billing_details section=customer-details]
M.[billing_details section=address-details]
N.[card_details]
O.[checkout_summary]
P.[checkout_submit]