# **API Pre Requirement Setup**
- In order to perform api process properly, here are some pre requirements which you need to setup in advance. Here we will guide you step by step.
****
## **Pre Requirements**
- There are some pre-requirements to meet to perform api action.
1. A valid access token is required to access routes.
2. Ensure that you have already finish setup the checkbox plugin.
****
### **Access Key and Access Token Guide**
- Authentication is essential to prevent confidential data from being revealed by random visiters, so is thus required in order to perform the API operation. Therefore, pre-requirements, generating the access key and access token for your own bot are required. The following contents will guide you through generating the access key and access token step by step.
1. Login to High5 platform.
2. Go to the Setting Page from the navagation
3. Find the Generate Access-Key and Access-Token part.
4. Genereate your Access-key and Access-token by clicking on the botton. (If you are not able to perform this action, please contact [customer support](human@high5.ai) for further assistance)
5. Copy and save the Access-key and Access-token in your environment setting.
> :warning: **If you, by any chance, re-generate the Access-Key and Access-Token, it means the old Access-key and Access-Token will automatically be revoked.**
****
### **Checkbox Plugin Guide**
- The checkbox plugin allows a checkbox to be displayed on your website and enables users to opt-in to receive messages from you on Messenger. The user's name and profile photo will be shown next to the checkbox once the user is active on Facebook. If the person is not logged in to Facebook or wants to log in as a different user, they can authenticate.
> **Pre-Requirements & Hint:**
1. White List Domain Enable
2. Testing on local host or http is not supported right now. We only support testing on https.
3. Ensure your usage of the plugin complies with local regulations or laws, including laws that require affirmative user action to opt in to promotional or direct marketing messages.
> **Implementation:**
1. Whitelist your domain:
For security concern, the plugin will render only when loaded on a domain that you have whitelisted.
You can setup whitelisted domain on your facebook page.
Go to Settings >> Messaging >> Click on Add Messenger to your website >> Add your domain `https://example.com/` to the WEBSITE DOMAIN at step 3.
2. After Whitelisting your domain you can insert the checkbox plugin code into your html page.
```html
<body>
<div
class="fb-messenger-checkbox"
origin="<your-domain>"
page_id="<your-pageid>"
messenger_app_id="970540413138028"
user_ref="< your-transaction-id >"
allow_login="true"
size="large"
skin="light"
center_align="true"
>
</div>
<input type="button" onclick="confirmOptIn()" value="Confirm Opt-in"/>
<script>
window.fbAsyncInit = function() {
FB.init({
appId: "970540413138028",
autoLogAppEvents: true,
xfbml: true,
version: "v8.0"
});
};
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) { return; }
js = d.createElement(s);
js.id = id;
js.src = "https://connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, "script", "facebook-jssdk"));
</script>
<script>
window.fbAsyncInit = function () {
FB.init({
appId: "970540413138028",
autoLogAppEvents: true,
xfbml: true,
version: "v8.0"
});
FB.Event.subscribe("messenger_checkbox", function (e) {
console.log("messenger_checkbox event");
if (e.event == "rendered") {
console.log("Plugin was rendered");
} else if (e.event == "checkbox") {
const checkboxState = e.state;
console.log("Checkbox state: " + checkboxState);
} else if (e.event == "not_you") {
console.log("User clicked 'not you'");
} else if (e.event == "hidden") {
console.log("Plugin was hidden");
}
});
};
</script>
<script>
function confirmOptIn() {
FB.AppEvents.logEvent('MessengerCheckboxUserConfirmation', null, {
"app_id': "970540413138028",
"page_id": "< your-page-id >",
"ref": "{\"shortcode\": \"< trigger-shortcode>\" }",
"user_ref": "< your-transaction-id >"
});
}
</script>
</body>
```
3. In the above code, there are some fields you should pay more attention on. First, `user_ref` represents a unique id which facebook uses to identify each user that you are interacting with. Second, `ref.shortcode` is required for the page to send a message to users when users opt in.
> :warning: **`MessengerCheckboxUserConfirmation` event must only be sent after the user has actively opted-in with an action including pressing the button or submitting a request form.**
> :warning: **A triggered `MessengerCheckboxUserConfirmation` is mandatory for enabling your Facebook page to send messages to users.**
> :warning: **If you see a console error in a frame, such as `Refused to display`, because any ancestor violates the following Content Security Policy directive, check that the domain of the page the plugin is being rendered on has been [whitelisted](https://developers.facebook.com/docs/messenger-platform/reference/messenger-profile-api/domain-whitelisting).**
> :warning: **The checkbox plug is currently not supported by Incognito window**
> :notebook: **For further requirements regarding the checkbox plugin, please refer to [Facebook official document](https://developers.facebook.com/docs/messenger-platform/discovery/checkbox-plugin)**
Sign in with Wallet
Connect another wallet