527724 - Persona badges for 3rd party sites

Status: RESOLVED WONTFIX

(Websites Graveyard :: getpersonas.com, defect)

Description

[Ryan Doherty (:rdoherty)]

Would be awesome for us to allow designers to embed their personas into their website with an iframe like mozilla.com. 

Pretty simple, offer them some code to copy/paste into their site. Code would be an iframe that points to a special page that is about 200x300 pixels with their persona.

Comment 1

[Martin Sch]

You need this script:

<script type="text/javascript">
var themes = [
  {
    id: "vx-id01",
    name: "vx",
    headerURL: "http://mypage.xx/personas/vxheader.jpg",
    footerURL: "http://mypage.xx/personas/vxfooter.jpg",
    textcolor: "#fff",
    accentcolor: "#6b6b6b"
  },
];

const INSTALL = "InstallBrowserTheme";
const PREVIEW = "PreviewBrowserTheme";
const RESET_PREVIEW = "ResetBrowserThemePreview";

function setTheme(node, theme, action) {
  node.setAttribute("data-browsertheme", JSON.stringify(themes[theme]));
  var event = document.createEvent("Events");
  event.initEvent(action, true, false);
  node.dispatchEvent(event);
}
</script>

And this html:
<button onclick="setTheme(this, 0, INSTALL);"
        onmouseover="setTheme(this, 0, PREVIEW);"
        onmouseout="setTheme(this, 0, RESET_PREVIEW);">Install Vx Theme</button>

Comment 2

[Deb Richardson [:dria] (plz NEEDINFO)]

This would be great, but should be something that works with Personas on AMO, not GetPersonas.com at this point.

Comment 3

[Wil Clouser [:clouserw]]

An easy way to do this would be in the documentation.  If you want it on the actual site, please explain the workflow, what it looks like, where it shows up, etc.

Comment 4

[Wil Clouser [:clouserw]]

getpersonas.com has been retired.  More information at https://blog.mozilla.org/addons/2013/04/11/background-themes-have-moved-to-amo/