I would like to add a translation option to our website but other than embedding the google translate widget (which doesn't look great) I can't find how to do this.
I am looking to style it to suit our website similar to what they have done on this site (not ours) https://www.visitscotland.com/brochures/
Any help would be much appreciated!
The typical approach to this is to have the content swap out based on some toggle - as in your example site - or indicator in the url - such as example.uk or example.de.
This would be much more efficient than attempting to translate your content for users with some widget, because it needs to be translated only once rather than every time a user visits the content.
There are also built-in translation features for certain browsers, chrome in particular often offers to translate pages. You can help enhance this a bit by explicitly stating what language your website is in, and then Chrome will offer to translate it to the language of the user's browser for them; there are two main ways to do this:
W3C recommends using the lang and/or xml:lang attributes in the html tag:
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
Google recommends the meta http-equiv:
<meta http-equiv="Content-Language" content="en">