Yoshki digital badge installation

Help Customization
1

Hello

I am slowly taking over my family business, which writes Wills and related legal documents. We’ve never really marketed on the Internet before (we have a website www.needawill.co.uk, for information, but basically our customers love us so much we have enough work by recommendation).

I feel as if I’ve got some interesting things to say about our industry, and I think we are missing out on a way of keeping a connection to our clients.

We belong to the Institute of Professional Willwriters (can’t post a link as I’m new). Part of that is a following a code of conduct part of which states our website has to verify through a service called Yoshki. The guide for setting this up is here.

Can I install this badge on my blog? I couldn’t when we set up a blog hosted by Wordpress, which is the reason we now run Wordpress through another provider. Wordpress is too big and too complicated.

I’d appreciate your guidance.

2

Badge is essentially a HTML code that you need to paste in your site?

I’d guess currently in your WordPress site it is inserted as HTML widget?

When it comes to WriteFreely, templates are stored in templates folder. So, say, you would like to add badge in page footer before powered by writefreely, you would need to edit templates/collection.tmpl:

		{{if .ShowFooterBranding }}
		<footer>
			<hr />
			<nav dir="ltr">
				{{if not .SingleUser}}<a class="home pubd" href="/">{{.SiteName}}</a> &middot; {{end}}powered by <a style="margin-left:0" href="https://writefreely.org">writefreely</a>
			</nav>
		</footer>
		{{ end }}

This would edit your blog home page. If you want badge on every post footer, see templates/post.tmpl as well:

<footer dir="ltr"><hr><nav><p style="font-size: 0.9em">{{localhtml "published with write.as" .Language}}</p></nav></footer>

Changes to templates will affect your whole instance.

1 Like
3

Hi @needawill! This can be done with some Custom JavaScript (part of the Pro plan you’re on a trial for at the moment). From your blog’s “Customize” page, you can scroll down to Custom JavaScript and copy & paste the following code inside that:


/* The footer */  
var topP = document.createElement("p");
topP.innerHTML = '<div style="max-width: 300px; max-height: 111px; margin: 0 auto;"><div style="position: relative; padding-bottom: 36.8%; height: auto; overflow: hidden;"><iframe style="border: 0px; margin: 0px; padding: 0px; backgroundcolor: transparent; top: 0px; left: 0px; width: 100%; height: 100%; position: absolute;" src="https://cdn.yoshki.com/iframe/55068r.html" width="300" height="150" frameborder="0" scrolling="no"></iframe></div></div>';
var cont = document.getElementById("wrapper");
if (cont !== null) {
    // Add to blog index
    cont.appendChild(topP);
} else {
    // Add to individual blog post page
    cont = document.getElementById("post-body");
    cont.insertAdjacentHTML("afterend", topP.outerHTML);
}

With that code it will appear at the footer of your blog, whether on the blog’s index page or an individual blog post (props to @Melyanna for this code). Let me know if that works for you! We can all help out with tweaking it a bit if needed.

And thanks for the input @gytisrepecka! @needawill is running a blog on Write.as, not a WriteFreely instance, but it’s good to know how to customize the WriteFreely templates if need be!

4

Thank you @cjeller1592 and @gytisrepecka ! I will have a play with that later.