Aftership code snippet

Hi everybody,

I am having difficulties to edit the tracking button by aftership Order Lookup Widget (Track Button) - AfterShip
How would I do exactly to paste the 2 code snippets? The first in the embed form and the second in between the < body and body>? It then appears but it remains on the left side of the page. What am I missing? Any help would be very much appreciated!

Thanks!!

1 Like

The first one can be implemented using embed-html widget. The second one should go to the Site settings → Custom Code → second field called before </body>.

Thanks for the response bartek! But the embed would always appear on the left upper side. How can i center it for example? Thanks again!!

Hi @piedone, you have your codes setup backwards in your project… copy your javascript code:

<script>(function(e,t,n){var r,i=e.getElementsByTagName(t)[0];if(e.getElementById(n))return;r=e.createElement(t);r.id=n;r.src="//apps.aftership.com/all.js";i.parentNode.insertBefore(r,i)})(document,"script","aftership-jssdk")</script> 

Into the Before Body section of custom code.

Then in the design view, copy the code that was in the Before Body section of custom code previously, into an html embed widget. You can give the html widget a class, and give it padding, margin etc.:

Copy to html embed widget:

div class="as-track-button" data-support="true" data-width="280" data-size="large"></div>

Notice there is some data-width property there and data-size property from the aftershift code… you might want to change that, depending on your design, or just leave it alone…

Once you do these changes, then publish, and you can see, the box aligns how you want it (although in your design, you might put it somewhere else, or change the look of the html embed widget):

Hope that helps you, cheers !

1 Like

Amazing! Thanks so much for the help with this!! it works perfectly!
cheers!

Excellent @piedone, glad to hear it worked out. We are in the process of also creating some short tutorial videos, on how to do things with embeds, so stay tuned !

1 Like

Hello @piedone & @cyberdave I just stumbled upon this while looking for a solution today.

I found a simple trick that worked.

At the very top of the code (beginning), add <div align="center">

At the very bottom of the code (end), add </div>

Simpless (:

1 Like

@thefirst, cool, good to hear :smile: There is usually multiple ways of accomplishing a task, and Webflow lets you use those options, whatever they might be, such as custom code, or using an embed widget etc.

It is always nice to see ways of getting something done, so thanks for the share :smile: