URL Structure
To open the STYLE PTTRNS front-end you will need to have your specific URL. Via this URL some settings can also be set. An example of a URL can be:
https://eyewear-uat-v2.pttrns.ai/?shopId=612de276731e730030b34de1&locationId=633a950f0158c07f9ce42e2e&language=nl-NL&kiosk=true&sessionId=09b87b22-ac0d-4fc0-8688-cf5d3cb9a356&category=sunglasses&genderFilter=female,unisex&allowCookies=false
Base URL
The base URL via which to access the STYLE PTTRNS front-end is https://eyewear-v2.pttrns.ai.
Environments
We have two environments available. One can be used for testing and the other is for production purposes only. Please note that shop IDs, session IDs, location IDs are not interchangeable. Also, the performance and stability of our testing environment are less than that of production. We strive to have the test environment stable, but this might not always be the case.
The ‘default’ of the URL points towards our production environment, so it is required to include the environment in the base URL when you are developing on against our test environment. The link for our test environment is: https://eyewear-uat-v2.pttrns.ai. For our production environment it is the same just without the UAT addition: https://eyewear-v2.pttrns.ai.
An important point to mention is that not every UAT service is constantly online, but rather on demand. The face analysis functionality goes offline after 4 hours of inactivity. You will notice that the face processor is inactive when you see this error pop up:
This error will also appear in swagger if you’re communicating directly with the API. Once you see this message the automation to start the face analysis service has been kicked off, and it should be back online within 10 minutes.
Design version
As mentioned before, at the moment of writing, we are on V2 of the design of the STYLE PTTRNS front-end. Since we are still supporting our legacy design for customers that still need to migrate it is required to add this parameter to the base URL: https://eyewear-v2.pttrns.ai.
Shop ID
In the URL your shop ID needs to be included. Please note that this will be different for the different environments we have. Once your shop is created your Customer Success Manager will be able to provide your shop ID to you.
Location
For a shop we will also create one or multiple locations. The functionality of locations is explained in Location functionality. Please note that this will be different for the different environments we have.
Language
This is an optional value since we will set a default language on your shop. However, if you support multiple languages, you can provide the language key in the URL. During onboarding, we will discuss which languages you want to support and what the default language will be.
If you have multiple languages per location, it is important to correctly include the language key on initialization.
For example, when you have the below two Product Detail Page links for respectively en-EN and nl-NL, providing this language key in initializing the front-end will pick the correct PDP link.
- en-EN www.thisismyshop.com/en/frame_123
- nl-NL www.thisismyshop.com/nl/frame_123
Kiosk
For in-store usage we provide a kiosk version of the STYLE PTTRNS front-end. This triggers some additional functionality like a checkmark via which a user must agree to Terms and Conditions prior to using the tool as well as a reset functionality after being idle for 3 minutes. The share functionality is disabled in the kiosk mode so pictures do not accidentally get stored on the device.
We also have a document available in which we explain how to set up a device for in-store usage using the kiosk functionality.
Session ID
It is also possible to include a user’s session ID in the URL so that a user can continue with their liked frames. This will even work cross-device. Information on how to get the session ID as well as an alternative approach of how to set a session ID.
Category
When you provide both sunglasses and prescription glasses it is possible to already set a filter which of those you want to show to a user. Simply add the category parameter to the URL and either set it to glasses or sunglasses. This will also skip the question prompted to users at the beginning of the flow. However a user can still switch to the other category in the final recommendations page when this is enabled for your shop.
This could be useful when you for example have a campaign running on sunglasses and are trying to funnel users to STYLE PTTRNS via a sunglasses tailored landing page.
Gender
When you already know if a user is only interested in female frames, you can also include this as a URL parameter. You can define male, female and or unisex. These values should be comma separated if using multiple. If you already have unisex always enabled, you probably only want to use either female or male.
The question that is prompted in the beginning of the flow will be skipped when this is provided in the URL. A user can still change these preferences in the adjust style section in the final recommendations page.
Anonymized performance analytics
In the URL, a parameter can be included which disables anonymized performance analytics cookies. It will not block all cookies since STYLE PTTRNS cannot function without its functional cookies.
We would like to emphasize that we fully anonymize user data and that we use anonymized performance analytics to track how users interact with our front-end. This provides crucial insights for us to develop and maintain the STYLE PTTRNS front-end. Therefore, we strongly discourage you from always initializing STYLE PTTRNS without anonymized performance analytics.
The technical possibility to disable anonymized performance analytics cookies are twofold. Either include it in the URL when initializing STYLE PTTRNS by adding allowCookies=false as a URL query parameter or using the following event trigger:
const iframe = document.getElementsByClassName('recommender-iframe')[0]
iframe.contentWindow.postMessage(
{
type: 'enableCookies',
enabled: false,
},
'*'
)