Advanced Customization Using CSS
To customize your opt-in prompts even beyond our prompt management tool, you can easily apply custom CSS on your website. Below are the main elements which you can manipulate.
pushboxcontainer = main container
noticlose = close icon
noticon = the bell icon (you can also use "._aimtellBell" - see example 2 below)
notibody = body text (main heading and byline)
teaser = main heading
teaser-byline = byline
button-approve = approve button
button-deny = deny button
Example 1: Changing the Font Size
For instance, you could change the font size of the byline text by adding the following snippet to your website:
<style> pushbox teaser-byline{ font-size:17px } </style>
To avoid conflicts with other CSS properties, we recommend you get as granular as possible when applying the style. Below is an example of a script for your convenience:
<pushbox>
<pushbox-cta>
<noticlose onclick="_aimtellPromptCancel()">X</noticlose>
<noticon>
<a target="_BLANK" rel="nofollow">
<img width="25" class="_aimtellBell" src="https://cdn.aimtell.com/prompt/noticon.png">
</a>
</noticon>
<notibody>
<teaser></teaser>
<teaser-byline>
Would you like to receive notifications about XYZ?
</teaser-byline>
</notibody>
<buttons>
<button-approve onclick="_aimtellPromptApprove()" class="_aimtellPromptApprove">Of course
</button-approve>
<button-deny onclick="_aimtellPromptDeny()" class="_aimtellPromptDeny">No, thanks.
</button-deny> </buttons>
</pushbox-cta>
</pushbox>
</pushboxcontainer>
Example 2: Changing the Bell Icon
If you'd like to change the icon that is used for the notification bell, you can use the following code. Simply replace the URL with the URL of your icon and paste this on your website before the closing '</body>' tag.
<style> _aimtellBell{ content:url('https://aimtell.com/images/icons/icon-192x192.png') !important; } </style>
If you have any additional questions please reach out to us at support@aimtell.com