Documentation Center

Customizing the Opt-In Prompt

Learn how to customize 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, there are a couple options to choose from! Let’s get started.

Steps

Start off by logging into your Aimtell account and opening your dashboard. From there, click on ‘Opt-In Prompts’ located in the navigation bar on the left side of the screen under ‘Websites & Set Up’.

C1

This will take you to a selection of either using the Native Opt-in Prompt or a Custom Opt-in Prompt for your website. Select 'Custom Opt-in Prompt'

C2


Once you select 'Custom Opt-in Prompt' a drop down of Custom Opt-in Prompts that you have created will be displayed. If you have not created a Custom Opt-in Prompt and would like to create a new one, click on the blue text that says 'Create/Manage Custom Opt-in Prompts'.

This will bring you to the page where you can manage your custom prompts. If you would like to create a new custom prompt, click on the blue button that says "Add Custom Prompt".


C3




On this screen you will can fill out a name for your Custom Prompt and you have a couple design options to choose from: "Top Left Dropdown Prompt", and "Middle Rectangle Prompt."

For the rest of this guide we will be using the "Top Left Dropdown Prompt" example. If you would like to learn more about using the "Middle Rectangle Prompt" click here


Give your prompt a name, then click on 'Create Prompt'.

Editing 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.

Editing Prompt

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'.

C3

Now that you've created your custom prompt, you'll need to specify when it should show to your subscribers by clicking 'Edit' next to the prompts you've created. 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 convenience:

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