5 {{ upvoteCount | shortNum }}
5 {{ upvoteCount | shortNum }}

I don't want that there?

by gzibell
4 replies
Hey Everyone,

I am working on adding online scheduling to my wife's hair salon website. The service that I am exploring now is schedulicity. The price is right and it seems to work very good. Has FB integration (sort of anyway).

I am trying to get this integrated on her website and they have two options. Either an overlay or embedded. I contacted their support and they said there was no options on there end. It looks to be javascript

<p style="text-align: center;"><script type="text/javascript" src="http://www.schedulicity.com/Scheduling/Embed/embedjs.aspx?business="></script>
<noscript><a href='http://www.schedulicity.com/Scheduling/Default.aspx?business=' title='Online Scheduling'>Schedule Now</a></noscript></p>

When using the overlay widget it just puts the button on the right hand side of the screen. When using the embedded widget it is a fixed size and I cannot figure out how to center it.

Is there anyway that I can put code around scedulicitys embed code to tell the button to be where I want or to center the embedded widget.

Does this question make sense?

The other option is to link out of her website to her page of schedulicity's site. I would like to keep visitors to her site from leaving if possible.

Thanks
  • Profile picture of the author David V
    Sure.
    You could wrap in a div and apply your custom css style to the div to put the button where you want.

    Example:
    Code:
    <div class="mycustomcssdiv">
<script type="text/javascript" src="http://www.schedulicity.com/Scheduling/Embed/embedjs.aspx?business="></script>
<noscript><a href='http://www.schedulicity.com/Scheduling/Default.aspx?business=' title='Online Scheduling'>Schedule Now</a></noscript>
</div>
    You may have to take into account any styling or positioning applied by the script.
    Hard to say exactly without seeing it in action.
    I didn't see any obvious demo on their website.
    {{ DiscussionBoard.errors[8013539].message }}
    • Profile picture of the author gzibell
      I made an attempt to wrap this in a div as you suggested but the button still showed up on the right hand side of the screen. It looks like the embed code that they are providing is just referencing some code on their server. I am curious if there is anything that I can do since it is just referencing code on their server. More research I guess.

      Originally Posted by David V View Post

      Sure.
      You could wrap in a div and apply your custom css style to the div to put the button where you want.

      Example:
      Code:
      <div class="mycustomcssdiv">
<script type="text/javascript" src="http://www.schedulicity.com/Scheduling/Embed/embedjs.aspx?business="></script>
<noscript><a href='http://www.schedulicity.com/Scheduling/Default.aspx?business=' title='Online Scheduling'>Schedule Now</a></noscript>
</div>
      You may have to take into account any styling or positioning applied by the script.
      Hard to say exactly without seeing it in action.
      I didn't see any obvious demo on their website.
      {{ DiscussionBoard.errors[8038085].message }}
      • Profile picture of the author gzibell
        Okay, I was doing some more research and was able to pull the embed code off of the source website. I saved the code and uploaded it to my hosting server and changed the url from this http://www.schedulicity.com/Scheduli...d/embedjs.aspx to point to the file that I uploaded to my hosting server. With that setup it is pulling the code locally from my hosting server and the overlay widget is working as it should. Now I just need to figure our how to change how the button is being positioned in this code. This would appear to be what I am looking for. Anyone with more experience than me care to chime in? I would like to just turn off whatever is defining the button position.

        Code:
        schedulicityNs.createScheduleNowButton = function()
{
    var temp = schedulicityTopDocument.createElement( "div" );
    
    //temp.innerHTML = "<img style='position: fixed; _position: absolute;' />";
    
    var img = schedulicityTopDocument.createElement("img");
    //var img = temp.getElementsByTagName('img')[0];
    
    img.src = "//www.schedulicity.com/Images/ScheduleNowVertical.png";
    img.id = "scheduleNowTab";
    img.alt = "Schedule Now";
    img.style.position = "fixed";
    img.style.top = schedulicityNs.topOffset + 'px';
    img.style.right = "0px";
    img.style.zIndex = 2000000001;
    img.style.cursor = "pointer";
        {{ DiscussionBoard.errors[8038196].message }}
  • Profile picture of the author David V
    You said you applied a div but it didn't work, but what about the css for the div? What was it that you created for css?

    Do you have a working example of what you have done? The url?
    It would be easier to see it.

    You may be better to leave the embed code from the service as is. If it's local and they update the service/widget, then yours will not update.
    {{ DiscussionBoard.errors[8039552].message }}

Trending Topics