A well-configured landing page ensures that users scanning your codes have a seamless and consistent experience. In this guide, we’ll walk through the key steps to set up and customize landing pages in the Scantrust platform, from choosing the right settings to tailoring the page for your campaign goals. By the end, you’ll be ready to configure landing pages that are both functional and engaging.
Where to Edit the Landing Pages
1. Go to Landing Pages in the slide-out menu.
2. Click on the 'PLUS' button in the upper right corner of the window to add a new Landing Page:
3. Then, on the top, you will see the main Landing Page Editor menu with 4 tabs:
- 'Content Builder' tab.
- 'Languages' tab.
- 'Colors' tab.
- 'Auth App' Branding tab.
4. At the top of the page, you find the campaign name, the number of products included in the campaign, and the Reference Language of this Landing Page.
IMPORTANT: The language written here MUST match the language you use to create this landing page. If it does not, the machine translation will fail, as well as the language detection on consumer phones.
Content Builder Tab
The Tab Editor tab is where you create all your content.
Click on: 'Click to add a new tab' --> you may choose between 3 different types of tabs
- Blank: content builder for text, images, buttons, or links
- Traceability: for the product journey and an interactive map
- Scantrust Authentication Feature
1. Also, you'll find the UPDATE Button: When this button is greyed out, the current version is in sync with the published version; when it is green, there are changes that still need to be synced:
2. On the right side of the screen, you see a 'mobile phone screen'
3. Above the mobile phone screen, you can select which flow you would like to see in the preview. There are 3 Result Flows:
-
Active Code Flow, which is for:
- Scantrust Secure Codes scanned with a third-party app.
- Scantrust Secure Codes scanned with an unsupported phone.
- Scantrust Identifiers (SIDs).
- Genuine Code Flow - which is for Scantrust Secure Codes scanned with a Scantrust-designated app on a supported phone.
-
Unable to verify flow, which is for any code that entered the negative flow, for example:
- The code is inactive
- The code is blacklisted
- The code scanned is a suspected counterfeit
4. Below the mobile phone screen, you see the PREVIEW ON MOBILE button:
5. Clicking there will open a new window with a QR Code that can be scanned via mobile phone. You can choose which flow to test:
Content builder Sub-Tabs
Correspond to the tabs that consumers will later see on their mobile device. It is recommended to have a maximum of 4 tabs visible at one time:
To change the tab settings, follow these steps:
1. Click on the three little dots on the tab:
2. In the pop-up window, you can edit:
3. For each tab, you have to decide individually if it should be visible for one, any or all of the scan results.
4. You are able to rename each tab and change the tab icon
Sub-Tab Content
BLANK Tab
1. To edit a blank tab there are a number of tools (widgets) available. These are:
- SKU-specific elements: (information is dynamically populated from the product)
- Product Picture
- Product Name
- Product Description
2. Also, standard webpage elements: (information is fixed for this Landing Page unless dynamic elements are used with the widget):
- Big Text
- Text block
- Call to Action Button
- Picture (can be uploaded or linked)
- Typeform Pop-Up
- Social Media Links
- Divider
- Video
- Consume Code
- Authentication Result
- Photo Authentication
3. To start adding content to your campaign, simply drag and drop the respective elements into the working area:
4. Then click on the edit icon:
5. Type text as normal. If you highlight a word, the format menu will pop up. Select the action you want to perform.
6. You are also able to add a link. Just click on the link icon from the menu. Then type the URL of the website you want to reference and click Enter.
7. With the following content added to the link, the user can click, and it will automatically open an email:
mailto: contact@scantrust.com?subject=QR Code Scanned &body= Dear Wasa Team, %0D%0A%0D%0A I have tasted your bread and I think it is delicious. %0D%0A%0D%0A Keep up the good work! %0D%0A %0D%0A Thank you!
%0D%0A ==> creates a line break
--> It is not possible to reference variable data in this link
8. If you want to reference an SCM field, type the @ symbol, and a list of all SCM fields available for that campaign will appear. Click on the one you want to insert. A placeholder will appear that will later be replaced with the respective SCM field information.
9. NOTE: If the SCM field of the code scanned is empty, this will look a little awkward for the consumer:
10. To add a Typeform to the Landing Page, click on the 'Typeform pop-up' button:
11. Add the Button text and the Typeform URL, and you are done:
12. It can also include more advanced handling --> you can ask the button to open an email and populate the email already, including with variable fields:
mailto: contact@scantrust.com?subject=Bulk Order @product_name &body= Dear Wasa Team, %0D%0A%0D%0A I would like to bulk-order this product. Here is my data: %0D%0A%0D%0A Product SKU: @product_sku %0D%0A Product name: @product_name %0D%0A%0D%0A Thank you!
%0D%0A ==> creates a line break
13. Finally, you can ask the button to start a call:
tel:+8615301728621 (should include the country code)
Traceability Sub-Tab
Now, let's look at adding traceability information to your Landing Page. Go to the track and trace tab you have previously added and click on ADD A NEW STEP.
1. A pop-up window will appear. There are 5 fields:
- Step Description
- Step Location
- Step Date
- Step Latitude
- Step Longitude
2. T&T information is displayed as follows each little window in step 1:
3. All 5 fields can be 100 percent dynamic and based on SCM field data. In the Step description, type your text and then type @ to select the respective field from the list. In the other 4 fields, select the SCM field from the drop-down.
4. Not every field may need to rely on the dynamic data of an SCM field. For example, if you want to display the manufacturing site and there is only one, you are able to enter this information directly. Make sure you enter the correct location data; otherwise, it will be shown incorrectly on the map. And ensure the date format is correct.
EXAMPLE: Both of these SCM steps look almost the same. The top one was created using Dynamic references; the bottom one was used with static information typed directly into each field. You can see that the top one does not say China. It is taking data from an SCM field that was populated with KP. It is important to note, that Each step will display the information as it is saved under the SCM field. It will not, for example, translate country abbreviations into the full country name:
Revoke Changes
It may happen that you are editing something and you mix things up. Most commonly, that will likely happen when you work with multiple languages and you edit i.e., the English section, but are putting information in the wrong language. The good thing is, you can restore everything to the previously published version by clicking on the small arrow next to the UPDATE button:
If you want to edit an existing Landing Page:
1. Click on the dot menu and select 'edit' to edit an existing Landing Page:
2. In the pop-up window, you have to select the campaign based on which you wish to test. This is important if you will incorporate SCM fields into your landing page:
Languages Tab
In the Global Settings Tab, you can choose your language. English is set as the default, but you can remove it and choose any other language. If you wish to display your campaign in multiple languages, you can add those languages here.
BEST PRACTICE: If you do have multiple languages, it is best to only add your editing language first and make it the DEFAULT LANGUAGE. Do all your editing and testing until you are happy with the result, and only then add the next language. By default, all the flows will be copied to the new language, and all you need to do is translate the text.
NOTE: When you later start editing the content of your campaign, ensure that you are always editing the correct language (top right, above the mobile screen). If you forget, your users will be shown the wrong language. For further details, please check this article: Translating Landing Pages
Colors Tab
In the Colors tab, you can choose the theme, text and background color of your campaign.
- Select a color you like, OR
- Type the color code according to your company's branding guidelines
Auth App Tab
We’ve enhanced authentication styling to allow more branding control for authentication applications. In this tab, you'll be able to display branded logos on the authentication app’s splash, scanning screens,
and configure background, primary, and secondary colors to match the brand identity. For further details, please check this article: Authentication Styling Customization.
Comments