Embed La Scratcheuse on your website
Embeddding La Scratcheuse's player on your website is super easy.
1. Ask for your credentials
2. Integrate the generated HTML code in your webpage.
1. Get your credentials by submitting the following form. Your credentials will be generated below.
2. Integrate code below
NB: If running under Wordpress, find out how to integrate HTML code in your posts.
Self hosted Wordpress.org
If you downloaded Wordpress, and hosted it on your server, go to the admin panel by going to yoursite.com/wp-admin or through yoursite.com/wp-login.php.
Create a new article or page in the left-side menu. In your text-editor, pick 'Text' tab, and insert our code directly in the editor. The iframe should appear when published.
If you hosted your site directly on wordpress.com, you can't embed our game unless you're VIP. For free wordpress.com members, only the main platforms such as YouTube, Dailymotion, vimeo, ... are allowed.
Select your wix website and go in the editor. On the left menu, click on 'Add' > 'More' > 'Embed a Site'.
On the frame that was created, click 'Enter Website Address', and enter your iframe url 'https://www.lascratcheuse.com/embed/your_id'.
Click on 'Pages' or 'Articles' on the left menu and create a new page or article. When the editor appears, choose the HTML panel, and insert our code. It's as simple as that !
When writing a new post or page, click on 'Insert a section here' then 'HTML'. Insert your code, the iframe should appear when published.
You can also pick 'Source' in the text editor, and insert your code.
For now, Overblog doesn't use HTTPS protocol, so you can't use our iframe (see below). However, they seem to think about it, be patient !
Our iframe code is delivered with a width and a height set to 900px and 500px. We recommand using these values to ensure all devices (mobile, tablet, desktop) compatibility. In particular the height HAS TO be at least 500px.
For smaller iframe sizes, a fallback screen invites the user to play in fullscreen to enjoy the full experience.For mobiles and tablets, width="900" will no longer apply, and the iframe will take the width of its container (default mode in most CMS, or you have to set it if you code your own website).
IMPORTANT NOTE: It is important to know that Safari for mobile and iPad DOES NOT support fullscreen, as our content is not recognized as video.
For that reason, you can set a width for our iframe down to 730px so that users can still play in iPad portrait mode, if you set our iframe big enough to fit the iPad screen. If width is too small, tablets users are invited to play in landscape mode, and if you set iframe's height to 500px as recommended, width is usually sufficient to enable users to play.
The same problem happens with iPhones. We set min-width to 280px so that even with the smallest screens (320px), you have space to integrate our iframe. However, if width < 280px, iPhone users won't be able to play in Safari (in Chrome yes), which represents 17% of mobile traffic. Height for mobile has to remain at 500px as before.
Apart from Safari mobile, our iframe and fullscreen mode has been successfully tested on all other browsers (Chrome, FireFox, Safari for desktop, Chrome for Android, FireFox for Android, Chrome for iPhone, Samsung Internet, ...) and devices (mobile, tablet or desktop).
We recommand a min width of 900px and a min-height of 500px for the best use, which are included in the code we provide. However we tolerate widths greater than 730px and heights greater than 400px for tablets in portrait mode. For tablets with smaller widths, only landscape mode will be supported. You can integrate our iframe with smaller dimensions, and a fullscreen mode will be proposed to play to La Scratcheuse in the best conditions. Our fullscreen is supported in all modern browsers. For mobiles and tablets, width="900" will no longer apply, and the iframe will take the width of its container (default mode in most CMS, or you have to set it if you code your own website). It is your responsibility to have a width superior to 280px (min screen width for mobiles is 320px). Once again, smaller widths are permitted and will propose fullscreen, HOWEVER it is important to know that, in the contrary of Safari desktop, Safari mobile (iOS) does NOT support fullscreen mode and Safari users represent 17% of mobile traffic. The reason, compared to other websites as YouTube that can go fullscreen, is that our content is not identified as video or music. The fullscreen for mobile is supported by all other mobile browsers (Chrome for Android, Samsubg Internet, ...). Fallback screens: - For desktop whose iframe width < 730px or height < 500, fullscreen is proposed. - It's the same for tablets. If user has entered fullscreen mode and width is still inferior to 730px, landscape mode is proposed. - For mobiles with iframe width < 280px, fullscreen is proposed but for iOS users where fullscreen is indicated as not supported.
Our website is encrypted with SSL certificate and runs over https. It means all communications between your browser and our website are encrypted. As well as our website wouldn't be displayed on a HTTPS site if it was running under HTTP, your site can't display our HTTPS iframe if it only has HTTP protocol.
Consider updating to HTTPS protocol before displaying La Scratcheuse plugin. A lot of companies, such as Let's encrypt and SSL for free provides for free SSL certicates to secure your website and make the web safer.
Having an issue ?
You can't embed our website ? Contact us, describe your website context and we'll get back to you as soon as possible to solve the problem.
I want a customized iframe for my website, is that possible ?
Everything is possible at La Scratcheuse.
Contact our team to get your customized iframe at firstname.lastname@example.org.