This documentation is for using Metomic in Auto mode. If you are unfamiliar with Standard/Auto, check the difference here
Metomic Auto mode is a stripped down version of Metomic that allows you to control the behaviour of your webpage by setting a
data-metomic-policy="..." attribute on elements or scripts.
If you are a developer, you probably want Standard mode
The simplest way to get started with Metomic is to add the following snippet to your website.
Note: You will need to replace
YOUR_METOMIC_CLIENT_ID with your Metomic client id. This can be found in the Developer section of the dashboard.
This will immediately enable the following features:
The content of this widget can be customised in the dashboard
Metomic also allows you to prevent scripts from loading if they depend on a policy that has not been consented to.
To use this feature, you must set two attributes on the script:
For example, to disable Google Analytics from loading until appropriate cookie consent has been given, you would turn this:
<!-- Google Analytics --><script>... google analytics loader script</script><!-- End Google Analytics -->
<!-- Google Analytics --><script data-metomic-policy="cookies:statistics" type="text/x-metomic">... google analytics loader script</script><!-- End Google Analytics -->
In the above example,
cookies:statistics is a reference to the
statistics part of the
cookies policy configured in the dashboard. Only when the user has consented to the collection of statistics will the GA script load.
Metomic allows you to dynamically show parts of your web page when a user has opted in to a particular policy.
To use this feature, simply attach an attribute of the form
data-metomic-policy="YOUR_POLICY_ID" to any HTML element:
<!-- This element will only render if the userhas consented to the social-sharing policy --><div data-metomic-policy="social-sharing">We hope you enjoyed our article!<a href="#">Click here</a> to share this on Facebook.</div>
Metomic allows you to trigger a consent popup by attaching a
data-metomic-policy="..." and a
data-metomic-action="trigger" to an element.
<!-- This button requests consent for a policy with id "recommendations" --><button data-metomic-policy="recommendations" data-metomic-action="trigger" /><!-- and for the sake of example, this section will display when consent is provided --><div data-metomic-policy="recommendations">Ok, great! Fill the details below and we'll get you started with recommendations....</div>
Metomic Auto mode provides a few basic "hands-free" utilities to start putting privacy-first design into your website. If you need more power, it might be time to look at using Metomic in Standard mode