If you want to create a unique experience for your app users and adjust how your website looks or behaves inside the app, we offer two options.
But first, let’s clear something up: while we can help you with small adjustments like hiding elements, we don’t build new features or change the functionality of your website. These changes require not only access to your site’s code, but also a deeper understanding of how it works, and are beyond the scope of our service.
1. Making Changes on Your Website (The Best Way)
The best way to customize how your website looks in the app is by making changes directly on your own site. You can easily detect when your website is being viewed in the app and adjust the content specifically for that.
How? Check the user agent. If it contains the word "canvas," that means the user is inside the app. With that, you can apply custom CSS or Javascript, or even hide certain elements just for app users.
Why is this the best option?
- You’re in control: You can make updates anytime directly on your website.
- Faster and smoother: Customizations load instantly without any flicker or delay.
Here’s a quick Javascript example to show how it works:
<script>
if (navigator.userAgent.toLowerCase().includes('canvas')) {
// Add your custom CSS or Javascript for app users here
}
</script>Or in PHP:
if (strpos(strtolower($_SERVER['HTTP_USER_AGENT']), 'canvas') !== false) {
// Output custom content for app users
}2. Using Code Injection (For Quick Fixes)
If you can’t edit your website’s code, you can use the Canvas code injection feature, which allows CSS and Javascript to be injected into the app. This option is usually a last resort for small changes, like hiding elements.
Why is this a backup plan?
- Slight flickering: Because the code gets injected as the page loads, users might notice a quick flicker on the elements affected by your code.
- Less flexible: The code needs to be minified and becomes hard to maintain as it grows. Changes to your website might also require the code to be updated in a separate platform, which is not ideal.
To use code injection you will need access to your app configuration, then under the "Advanced" area look you can add or edit the following parameter:
"Code_Injecting": {
"Enable_Injecting": false,
"Code_Injecting_Items": [
{
"Regex": "",
"Code": ""
}
]
},Make sure to set "Enable_Injecting" to true, and then use the "Regex" and "Code" parameters to determine where to inject your code, and the code to be injected.
Here is an example:
"Code_Injecting": {
"Enable_Injecting": true,
"Code_Injecting_Items": [
{
"Regex": ".*your-domain.*",
"Code": "<style>footer { display:none !important; }</style>"
}
]
},Wrapping Up
For the best results, we recommend making changes directly on your website. It’s faster, smoother, and gives you full control. If you need assistance let us know and our team will be happy to guide you.
