How To Create or Edit Landing Pages

Konvey-hosted landing pages are designed, by default, to serve as sign-up form, profile update form and unsubscribe form, based on the custom-coded hyperlink used to direct the recipient. Custom landing pages may also be created to serve one specific function, or combinations of functions.

The Konvey landing page builder provides complete access to any needed server-side script, allowing for extremely flexible customization. This builder takes place in a window, with controls for the page broken out into logical sections. While there are tool-tips in place, an overview of the controls is often helpful.

Edit Landing Page fields:

Name – this is a descriptive name that should be recognizable to the admin, as it is not displayed to contacts.

Description – this allows for a more detailed explanation of the landing page than the name alone provides. This field is also not displayed to contacts.

Is Site Default – there can be only one default landing page per site, so this will become the landing page that contacts will see if they were to visit , without the encrypted URL data used in mailings (i.e. a landing page ID, a specific mailing ID, etc.).

Server-Side Personalization – This should be selected only if you need to use Konvey’s server-side personalization engine (i.e. to build a programmatic URL to another Landing Page based on contact/mailing data). This function is resource-intensive however, so it should only be selected if truly needed.

Confirmation Mailing (Join) – If the page is visited in Join mode, and you would like to send a confirmation email when the Join form is successfully submitted, this dropdown allows you to choose the mailing for that purpose. The selected mailing must be already built in the system, in order to show up in the dropdown list.

Confirmation Mailing (Profile Update) – Similar to the Join confirmation mailing, but used when the landing page is in Profile Update mode.

Edit Landing Page code tabs:

Notice that at the top of all tabs the dropdown including the following options, to make customization easier:  Use Default Content, Replace Default Content, Prepend to Default Content, Append to Default Content.

Head – This tab contains the contents of the HTML <head> section. By default, your Landing Pages use AngularJS as a Javascript framework, Bootstrap as a CSS framework and JQuery as an HTML utility library, so the <head> section contains <link> and <script> elements referencing those components. The very outermost elements of the HTML structure (i.e. <!DOCTYPE>, <html>, <head>, and <body>) are common to all Landing Pages and are not customizable.

CSS – this tab contains any <style> elements to be included in the top of the Container section (see next). Additional <style> elements may be added before or after the default <style> element, or the default may be edited or removed completely.

Container – this tab includes the main <div> element, containing all of the visible page content, including the content from the Header and Footer tabs (see below). Any changes or additions that are not appropriate for the Header or Footer sections should be done here. In the default code, the <ng-view> element will be populated by the form/fields, so content may be easily placed above or below the form (see image, click to enlarge).

Header – this tab contains any display code that appears at the top of the visible content, including logo(s), header banners, navigation links, etc.

Footer – very similar to the Header tab content, except that it is placed at the bottom of the visible content.

Join – this tab contains the functional <form> of the landing Page when it’s in Join or Profile Update modes. This will not often be updated, as changes to profile fields that appear by default should be managed on the Script tab (see below).

Confirmation - this tab contains the messages that appear when a contact successfully joins or updates (depending on the mode of the page). The default messages are very terse and generic, so you should probably copy the default HTML and replace it with a modified version that contains more customized content. Don't remove the default CSS classes and ng-if attributes, though, unless you're making significant changes to the default Javascript.

Unsubscribe - this tab contains the many different messages that might appear when the Landing Page is acting in Unsubscribe mode. If you'd like to customize the messages, you should copy the default HTML and replace it with a modified version that contains more customized content, without changing the default AngularJS-specific attributes and Javascript.

Script – this tab contains the default javascript, and it’s very unlikely you would ever replace it in its entirety, but it exposes an object named "konvey" (located at the bottom of the default Script section) that contains properties and methods you can override. Here you might make such changes as determining which fields are displayed in any given mode.

Join (No Script) - this is HTML that will be displayed to users who hit the Landing Page in Join or Profile Update mode but who have disabled Javascript in their browser. These modes can't operate properly without Javascript, so you should provide a message advising the user to re-enable Javascript.

Unsubscribe (No Script) – this is HTML that will be displayed to users who hit the Landing Page in Unsubscribe mode, but who have disabled Javascript in their browser. You should provide (along with an explanatory message) an HTML form with a submit button. Clicking that button will unsubscribe the user from all lists, even if the link pointing to the Landing Page targeted only specific lists.

Unsubscribe Success (No Script) - this is an HTML message for users with Javascript disabled who just clicked the Unsubscribe button and who have been successfully unsubscribed.

Unsubscribe Failure (No Script) - this is an HTML message for users with Javascript disabled, who just clicked the Unsubscribe button, but who were not subscribed to any Lists and thus could not be explicitly unsubscribed.