.png)
Website touchpoints - Website integration
Website integration
A Website touchpoint can be integrated into a HTML page in three different ways:
- As a pop-up on the same screen
- Embedded in the same page. In this case, the touchpoint is made visible through an Iframe.
- The survey opens in a new tab.
IN THIS ARTICLE
1. Where can I find the website integration
This may be the part where it gets a little bit more technical. To integrate your touchpoint on your website, you need the integration code, which can be found in the "Website integration".
- In touchpoint settings, select the touchpoint you would like to integrate in your website.
- In your touchpoint settings, hit the button 'get the Code'.
You will now be redirected to the page where the code will be generated according to the type of website touchpoint you made earlier in the survey template. If your touchpoint is online, you will need to put it offline first and then you will be redirected to the editing page where the integration code can be copied.
- You will now be able to integrate the code into the head of a page.
You can do this by adding the following "<div id="survey"></div>" between the <body> and </body> tags. If you are not sure how to do this, please ask advice to someone with technical IT skills and knows how your website has been built. You can also add it via google Tag manager or a similar tool!
2. Parameters
In addition, there are also a number of parameters available in the code snippet (the gray box with java script and html code).
baseUrl, tenandId and touchpointId
These parameters are set automatically and should never be changed by the user.
Language
This will be the default language for the survey.
Note: This will automatically be adjusted to the language which is set in the browser if the survey is available in this language. You can add languages in the general settings of your touchpoint.
Is preview
This parameter must be removed by the customer when the survey goes into production. When changing the type of website touchpoint, changes will also be made in the code snippet. This will therefore have to be copied again to ensure that the survey is displayed properly.
Metadata
There is a switch available at the bottom of the "website integrations" which will enable the user to add specific metadata in the code snippet. If enabled, you can add static metadata to the code. This is just a tool and dynamic metadata values need to be added by means of the Data Layer.
Note: Before you do this, be sure to check if there are already metadata keys available in the Metadata key section. You can find this section when navigating to Touchpoint Settings.
Once you have done this, you can start adding keys in your code snippet. The variables can become dynamic if the values are enclosed by double curly-braces (key: {{value}}). The values can the be pushed to the code using the data collected on the Data Layer.
Respondent data
You can also add personal data about the person who responded to your survey in the code snippet. You can add following information:
- First name
- Last name
- Email address
- Phone number
In the code snippet, it will look like this:
Quarantine
A quarantine period can be added to the piece of code to be integrated (see above) as mentioned in the SDK. In order to do so, you need to fill in the quarantine period (in days) in the definition of the survey at the end of the piece of code to be integrated.
This is an example for the modalSurvey (pop-up):
modalSurvey = new hcWebsiteTouchpoint.ModalSurvey(urlBuilder, { quarantineConfig: { period: 5 // days } }); modalSurvey.show();
In this example "5" is the amount of days that the survey will not appear on the website. This can be customized to the amount of days desired.
3. Github
For developer information on how to install and configure your survey to the fullest, please read our Github documentation: https://github.com/hellocustomer/HC.WebsiteSDK