Optimizely – Slot Swapping Bookmarklet

In the beginning of this month (August 2021), I saw a blog post by EpiNova that absolutely blew my mind. There is a query string that will allow you to view your Optimizely DXP Slot with your live slot domain name. (Link to the article) I had an idea to make this even easier…..CREATE A BOOKMARKLET!

This solves an issue that I faced not too long ago, since you cannot give custom domain names to the DXP Slots. If you have a multi-site instance, and you want to be able to do some spot-checks and functionality tests in the DXP Slot, the only option that you really have is to rebind the slot URL to be the primary URL for the specific site. This is not ideal when the instance has a lot of sites.

With this solution, if you use the query string to push you to your slot, you can use your bindings for your live domain to view any of your multiple sites from your single instance.

In this post, we will go through the following:

So….What is a Bookmarklet?

A Bookmarklet is simply a bookmark that has JavaScript in it.

For instance, in the most complicated Bookmarklet, to accomplish what we’re doing, we need to apply the following logic from within a bookmark:

  1. Determine if a query string already exists in the URL
    • This helps us determine if we append with a ? or a &…unless it already exists
  2. If so, is that query string the one we are going to use?
    • we don’t want to add the same query string multiple times
  3. If the query string doesn’t exist, append it on.
    • ?x-ms-routing-name=
  4. If the query string does exist, toggle the keywords
    • Toggle between Self/Slot

The thing that makes this cool is that if you put it on your bookmark bar, all you have to do is click it to switch back and fourth from the slot to the live environment.

Alright…that’s cool…now how do we do it?

I’ve created three Bookmarklets, just so it will fit anyone’s use-case. It also helped me learn more about what I could do, when I started with the simpler ones.

In the below examples, the Minified code is what will be used in the Bookmarklet.

Go to Slot

This Bookmarklet simply appends the query string to go to the Slot. It does take into account if query strings already exist on the page or not.

Drag the above button into your bookmark bar to easily add this Bookmarklet.

Go to Live slot

This Bookmarklet simply appends the query string to go to the Live environment. It does take into account if query strings already exist on the page or not.

Drag the above button into your bookmark bar to easily add this Bookmarklet.

Toggle between the Live and Slot environment

This Bookmarklet combines the above two Bookmarklets, and will toggle between the live and slot environment, without having to remove the query string. This will take care of it all for you!

Drag the above button into your bookmark bar to easily add this Bookmarklet.

Conclusion

Please let me know if you run into any issues with these. They are absolutely a work in progress, and I will make sure to notify of any big updates.

More to come!

As always, please reach out if you have any questions/comments/concerns.

Eric Markson
Eric Markson

Technical Architect @ Verndale | Optimizely MVP - Platinum | Optimizely Content Cloud SME - Platinum

Articles: 17

2 Comments

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.