To customize the look of your button, enter custom CSS in the style key. The container key defines the container in which the button will be placed.
Place the button on the right side:
<script>
Yodel.initialize({
identifier: "YOUR IDENTIFIER",
container: document.querySelector("#myContainer"),
style: {
display: "inline-block",
position: "initial",
boxShadow: "initial",
borderRadius: "initial",
offline: {
color: "grey"
},
online: {
color: "green"
},
live: {
color: "red"
}
}
});
</script>
Place the button on the left side:
<script>
Yodel.initialize({
identifier: "YOUR IDENTIFIER",
container: document.querySelector("#myContainer"),
style: {
right: "initial",
left: "1em",
display: "inline-block",
boxShadow: "initial",
borderRadius: "initial",
offline: {
color: "grey"
},
online: {
color: "green"
},
live: {
color: "red"
}
}
});
</script>States
- offline Not (yet) initialised or not compatible with browser.
- online Button ready to use.
- live While call is running.
HTTPS Requirement
Our web call button is based on the WebRTC standard. This standard needs your web page to be secured via HTTPS. If you need a HTTPS certificate please contact your hosting provider or check out letsencrypt.org.
We do not recommend you to change the style of the Web Button (e.g. size, tag), as this changed Web Button might then not be compatible with our future updates.
How to use the Yodel Web Button on your Wordpress page
There are several ways how to embed the Yodel web button to your Wordpress page.
One simple way it is to add the code snippet of your button to the "footer.php" of your template. The screenshot below shows exactly where the correct position is in the code.
