This procedure will guide you on how to style your funnel buttons such as the "buy now" or "decline offer" buttons. You can create a unique look using the CSS markup and values below.
Note: If you have questions regarding how to build out styling your funnel button, please consult with a web designer or technician. |
Upsell Button/Decline Button
Text: Enter the text you want to appear for your upsell button
Style: CSS is enabled to set a background photo or a color for your funnel button
Class: CSS Class Designated to Funnel Button (CSS Class Name is case sensitive)
If you want to style the funnel buttons...
var PayCafeParams = {
PayCafeUpsellButton: {
text: [Text for your upsell button.]
style: [CSS to style your upsell button.]
class: [css class name]
},
PayCafeDeclineButton: {
text: [Text for your decline button.]
style: [CSS to style your decline button.]
class: [css class name]
}
}
The values below will give you guidance on size, color and background images.
Here is an example of values
var PayCafeParams = {
PayCafeUpsellButton: {
text: 'Invite another purchase!',
style: 'background: url(https://images.pexels.com/photos/370799/pexels-photo-370799.jpeg);
background-size: 100%;
border-radius: 5px;
color: #ffffff;
font-size: x-large;
height: 80px;
width: 300px;'
},
PayCafeDeclineButton: {
text: 'Click to decline.',
style: 'background-color: #eeeeee; border: 1px solid #000000;
border-radius: 5px;
font-size: small;
height: 30px;
width: 150px;'
}
}