Aimtell

Aimtell Documentation

Welcome to the Aimtell documentation hub. You'll find comprehensive guides and documentation to help you start working with Aimtell as quickly as possible, as well as support if you get stuck. Let's jump right in!

Get Started    

Customizing the Opt-In Prompt

In this document we are going to show you how you can set up custom opt-in prompts for your website. Let’s get started.

Steps

Start off by logging into your Aimtell account and opening your dashboard. On the navigation bar, click the button titled Prompts, and then select ‘Add Push Prompt.’

This will take you to our Create Prompt window where you will choose a name for your custom prompt. Input the name and click 'Create Prompt.'

This next screen is where you will input all of the information for your custom prompt. Our custom prompts allow you to create your own headline, body text, and button text. You can also choose the font colors for these elements as well.

As you input your information, the Prompt Quick Preview will automatically update to reflect your changes. The preview displays exactly how the notification will display to your users, so make sure you are happy with how the prompt looks before finishing.

The colored squares are what you select to change the font colors. The second squares next to the Cancel and Approve buttons allow you to select a background color for the buttons.

When you are happy with your prompt, click 'Update Prompt'.

Now that you've created your custom prompt, you'll need to specify when it should show to your subscribers. You can do this by clicking the ‘Prompt Management’ link below the Prompt Quick Preview to make that change. If you need help with prompt management, read our walk-through on it here.

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 convinience:

<pushbox>
  <pushbox-cta>
    <noticlose onclick="_aimtellPromptCancel()">X</noticlose>
    <noticon>
        <a target="_BLANK" rel="nofollow" href="https://aimtell.com?utm_source=287&amp;utm_medium=bell&amp;utm_campaign=pushbox"><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>
Customizing the Opt-In Prompt, Customizing, Opt-In Prompt, Advanced Customization Using CSS

Customizing the Opt-In Prompt