flyout banner

[alibey]

Do you guys have any Flyout Banner functionality in the works for swift builder?

i am going to start a new loyalty/rewards program. this will be via the woocommerce extension for this purpose.

i want customers interested in getting loyalty rewards to be able to sign up for this program using a form that tells us that they want to opt in the loyalty program. the form is of course the easy part.

the hard part is that i want a flyout banner to slide out when they click on a vertical tab that says “Reward Yourself” on the home page to the left of the sidebar.

i already wrote a custom version of this using html and css only, adding the css to the custom css editor, and the html to a raw html box that i placed in the main page to the site. it looks okay but crude looking, but it works.

however it is difficult and time-consumming to get the tab to line up exactly right when dealing the responsive mode testing, and i have a huge catalog to populate so i want a short cut that will will do this for me without my having to code it.

so … you got something in the works for this… or can you recommend a widget that is up to snuff that does this

or should i just write it myself? (i can show the code i have already written that does a primitive non responsive version of this… but, as it said, it works!)

[David Martin – Support]

Hi,

We don’t have any plans for this however if you can collect some examples of what you like on other sites I can pass this back for discussion.

Thanks.

[alibey]

okay i will show u guys what i like in the form of existing code i simplified. it places the flyout banner on the right hand side of the page, and it goes from right to left (i think left to right is more effective). this code is the simplification of a complex form based flyout that i found on codepen, and i junked most of their unnecessary form based stuff which was actually written in SASS.

it is very crude. but it does the job without looking like some annoyingly distracting flash thing.

however i can think of much interesting (but still elegantly simple) approaches from a UI perspective
in particular, allowing the user to enter their userid to opt-in for the reward program
instead of having to go to another page (like i have here) to sign in, which adds a lot of friction
to getting them sign up for a loyalty reward.

basically i want one click signup for a loyalty program that would be implemented via the woocommerce rewards extension. the purpose of the flyout would be to enroll them in that as easily as possible with the fewest clicks possible to reduce bounce as much as possible.

the problem now is that if they sign up, the site admin gets the usual woocommerce new user email, and you have the hassle of manually keeping track of who get the loyalty program and who doesn’t.

but what i want is for a customer (new or existing) to sign up for their reward in once click as soon after they arrive on the hp.

so instead of having some annoying immovable flyout like on pinterest that blocks the view

i want the flyout to be clickable, so the user drives the flyout (not some automated timer things that does nothing but annoy) and control the experience

and a customer then either types their existing userid to optin

or signs up as a new user to get th rewards

like all your customers, i am operating in a very competitive space, and i want every possible advantage to gain market share. online retailing is a knife fight where you need every possible tool at your disposable to survive.

if atelier could write something that allows the user to determine the direction and size of the flyout
AND provide this one click log in functionality)…

then swift builder would probably rule in the woocommerce theme space, even though strictly speaking this goes beyond theme building.

here is the primitive code forked off codepen that my test example is based on

/*  this goes in a raw html box in swift builder */

<div id="flyout" >
  <div id="button" style="color:white;">
    <div class="text btn btn-primary">Reward yourself</div>   /* this is what the user clicks on */
  </div>
  <h1 style="font-weight:bolder; color: white;">Be loyal to Erin!</h1>&nbsp;
  <h3>And earn a $100 store credit.  <br> Find out more <a href="https://wp.me/P6yEu0-4AM"><span style="font-weight: bold; color: #4cbb17; font-size: 135%;"</span>here.</a></h3>
 </div>

/* this goes in the custom css */

#flyout {
  width: 350px;
  min-height: 150px;
  background: #A50000;
  background: -moz-radial-gradient(90% 50%, ellipse cover, #f20000 0%, #A50000 75%);
  background: -webkit-gradient(radial, 90% 50%, 0px, 90% 50%, 75%, color-stop(0%, #f20000), color-stop(75%, #A50000));
  background: -webkit-radial-gradient(90% 50%, ellipse cover, #f20000 0%, #A50000 40%);
  background: -o-radial-gradient(90% 50%, ellipse cover, #f20000 0%, #A50000 75%);
  background: -ms-radial-gradient(90% 50%, ellipse cover, #f20000 0%, #A50000 75%);
  background: radial-gradient(ellipse at 90% 50%, #f20000 0%, #a50000 75%);
  border: 1px solid #A50000;
  position: absolute;
  top: 30px;
  right: -350px;
  -webkit-transition: all 400ms ease;
  -moz-transition: all 400ms ease;
  -ms-transition: all 400ms ease;
  -o-transition: all 400ms ease;
  transition: all 400ms ease;
  -webkit-border-radius: 4px 0 0 4px;
  border-radius: 4px 0 0 4px;
  padding: 15px;
}
#flyout h3 {
  margin: 0;
  color: #fff;
}
#flyout h4 {
  color: #fff;
  margin: 0 0 20px 0;
}
#flyout .form-control {
  color: #A50000;
}
#flyout textarea {
  min-height: 100px;
}
#flyout .btn-default {
  background-color: #fff;
  border: none;
  color: #A50000;
}
#flyout .btn-default:hover {
  opacity: 0.4;
}

#flyout #button {
  position: absolute;
  top: 64px;
  left: -98px;
  border-bottom: 0;
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  -webkit-transition: all 400ms ease;
  -moz-transition: all 400ms ease;
  -ms-transition: all 400ms ease;
  -o-transition: all 400ms ease;
  transition: all 400ms ease;
}
#flyout #button .text {
  -webkit-border-radius: 4px 4px 0 0;
  border-radius: 4px 4px 0 0;
  padding: 10px 20px 15px 20px;
  opacity: 1;
  -webkit-transition: all 400ms ease;
  -moz-transition: all 400ms ease;
  -ms-transition: all 400ms ease;
  -o-transition: all 400ms ease;
  transition: all 400ms ease;
  border-bottom: none;
}
#flyout #button .btn-primary {
  background-color: #A50000;
  border-color: #A50000;
}

#flyout:hover {
  right: 0;
  -webkit-transition: all 400ms ease;
  -moz-transition: all 400ms ease;
  -ms-transition: all 400ms ease;
  -o-transition: all 400ms ease;
  transition: all 400ms ease;
}

[David Martin – Support]

Thanks for the feedback, an example of what could be done would similar to this plugin: http://justcapelle.com/flyout/

The actual functionality of integrating the shortcodes to another 3rd party plugin is not something we could do, but the front-end display is something that I can certainly pass back.

Thanks.

[alibey]

i’d actually already checked out the capelle flyout. for the $7 i was wondering if it worked with atelier or not.
would love to know if any of your existing customers use this

in terms of deep integration with the woocommerce loyalty extension, well, something like this might be better than nothing at all

[David Martin – Support]

Hi,

Unfortunalty I have not seen anyone using it so I could not say 100%.

Thanks.