Identikit via Website

Identikit
#1

Hi

I hope you don’t mind me contacting you but I was wondering if you would be able to help. I’m still very active, and enthusiastic, with Identikit having constructed five different identification keys, all primarily to aid my learning. Although four of them are currently available via the FSC website, I would now like to make them available from my own website. I have a Google domain ‘eclectic-ecologist.com’ and I’ve been trying out the Wix website builder. Although I’ve been successful in creating a button that enables a user to download .pdf documents (which is also a requirement) I have not been able to work out how to access my Identikit keys. I’ve followed the Identikit notes on ‘Deploying your visualisations’ but I’m stuck at stage 4.1.4 ‘Copy the new folder to your webserver below the root directory representing your domain’. Can you help? How do I upload the necessary HTML, JavaScript and CSS files that comprise Identikit?

Many thanks and I hope that you can help.

Best regards

Steve

Steve Docker

Eclectic Ecologist

Mob: 07935 055797

ORCID: ORCID

ResearchGate: https://www.researchgate.net/profile/Stephen_Docker

#2

Hi Steve,

I recommend using Netlify for the easiest deployments. It’s completely free and you can use their drag and drop deployment facility:

Other methods require a fair bit of knowledge of working with web servers. This isn’t all that difficult to learn if you’re keen. You can buy some basic web hosting with a reputable firm like Krystal or Clook for £4.99 a month. They have good documentation and support.

Update: also, worth pointing out, for your £4.99 a month, you get access to the support desk of the web host. I know Krystal have a good reputation and I’ve personal experience with Clook Internet who are also superb and typically answer support tickets within 5 minutes. We use Clook for the main fscbiodiversity.uk website.

1 Like
#3

@Ecology Was that of any help?

#4

Hi Charles and thanks for your comments, I’ll take a closer look. I do now have my live website/Google domain at www.eclectic-ecologist.com built via Wix but I have not, as yet, been able to make my Identikits available via this route. Thanks.

#5

Hi Charles, I’m struggling a little with this - do you think we could have a chat?

Best regards

Steve

#6

Hi, I have just received the following response from Wix support (see below) and I would really appreciate knowing if I could use the Identikit code in the way suggested? If so, what code would I need to paste into their iFrame? Many thanks, Steve.

Jean (Wix Support)
March 30, 2022 10:28 AM (UTC-04:00)

Hey, Steve!

Thank you for getting back to us at Wix Customer Care!

As I understand you wish to try and add the Identikit to your site, however we do not support this integration. You’ve asked if you would need to upload files into the webserver - this is not exactly how it works.

You can embed a site or an element from Identikit into your site’s page. Wix is providing you HTML element that you can add the Identikit code to. The missing piece here is the correct code for Identikit.

I suggest reaching out to Identikit directly, to see if they could give you the HTML code to embed into your Wix site iFrame element. Please, see the requirements to the code here - you can pass them to Identikit support to see if they could provide you with the correct embed solution.

Once you have this code, you’ll be opening your Editor and adding an HTML element to the page:

958×866 180 KB

When added, it would require you to enter the HTML code you’d obtain from the developers of this solution.

1164×776 172 KB

The Identikit functionality would be working inside the widget in the iFrame element on your site’s page.

Please, be advised, that we’re unable to assist in creating or editing the code itself, as the app is not a Wix app - it would be better to address those questions to Identikit support. Also, our support would be limited in case the code refuses to work on the site too.

Hope this information is helpful!

#7

Hi Steve,

It looks like Wix are saying you can’t upload files to the web server, but that’s what you need to do - Indentikit’s codes, your CSV files, your images etc - in order for it to host identikit. You may be able to use an iFrame to superficially embed an Identikit key on the Wix website, but it would still first need to be hosted somewehre else (e.g. Netlify).

Rich

#8

Yes, that’s exactly right. Wix is essentially a hosted CMS with drag-and-drop site building tools. You can’t upload your own HTML, CSS and JavaScript files (the raw materials of websites, including Identikit) like you can with a “real” web server.

An iframe is something you use to embed another web page into your own website. E.g., you can embed a Google map or a YouTube video into your site using an iframe.

But, as Rich says, you need for that other website to be hosted and accessible somewhere online. So, you’ll still need to revert to my earlier advice to either use Netlify or a hosting company to host the Identikit part.

@Graham Wenman has a similar thing going on with his Micro-moth larvae ID site (MIMOLA-ID). He doesn’t use an iframe but instead links out to the Identikit which is hosted separately on Netlify. See these links:

#9

Hi Charles, I’m starting to feel like a nuisance but I’m not getting very far with my website deployment of Identikit. I’ve set-up a Netlify team (Identikit-sd) and site (identikit-sd-test) but I don’t appear to be able to ‘drag & drop’ the necessary Identikit folders/files. I must be missing something or I’m not set-up correctly - can you help to get this up and running? I’m not very technical when it comes to websites etc! I am striving to have control over my Identikit deployments (both large and mobile formats) so as to continue to make resources available to a wide user base into the future. I’m happy for you to contact me direct [email protected] or by phone if that helps. Many thanks.

#10

Hi Steve,

Have you followed the guidance in the Netlify video? This one:

(1) Netlify Tutorial – Drag and drop deploys on Netlify - YouTube

When you drag and drop the folder containing the Identikit deployment files* into Netlify, what happens?

* What I mean by “folder containing Identikit deployment” is the folder you should get by following Rich’s instructions in the deployment documentation: Deploying your visualisations.pdf in section 4.1 Simple deployment as a standalone page. Follow the steps there, but at step 5, drag and drop the folder into Netlify (as demonstrated in the video).

#11

Hi Charles, I’m very pleased to be able to report that I have now managed to deploy my Identikits from my Wix website, eclectic-ecologist.com via Netlify. I hadn’t realised that I needed to re-title the ‘vis.html’ file to ‘index.html’.

However, this is only the large format versions of my Identikits, do I need a different set of files in order to deploy the mobile versions?

#12

Have you got a mobile version prepared already?

#13

Hi Charles, no, I’ve never done that - the links to the mobile versions are all via the FSC Biodiversity website.

#14

Ah, ok. Set up of a mobile version is a little bit more complicated. Have a look at Deploying your visualisations.pdf section 7 Implementations for mobile use.

Easiest approach is to create a separate mobile version in a different folder with its own index.html, then upload that to a new site in your account on Netlify. You will again want to use the “Deploy local project files manually using Netlify’s deploy dropzone” option.

Your site is looking really good, btw :+1:

#15

OK, thanks. I have tombiovis-1.7.2 which only contains up to vis5. Where do I get tombiovis-1.8.0 which includes vis6 please?

#16

I think we better ask @rburkmar about upgrading to the latest version - I suspect there might be some gotchas and I wouldn’t want you to break your kits.

#17

OK, will do - I have managed to obtain tombiovis-1.8.2

#18

Everything appears to be working now - thanks for your help.

#19

One further issue regarding the mobile version! When I link to the mobile version via my website and added to my home screen it does not include the ‘offline options’ and therefore I cannot install as an app on my Android for use when there is no internet connection. Any suggestions? I have been able to do this previously (from the FSC Biodiversity website link). Thanks.

#20

Did you follow the guidance in section 7.3?

7.3 Enabling the service worker

The service worker – ‘sw.js’ – is the key resource that enables the offline use of the Identikit. For sites that deliver an Identikit resource from a standalone html file (like ‘vism.html’) you should not need to rename, move or otherwise mess with this file. But to actually make use of the service worker’s caching capabilities, your site needs to be served over a secure connection, i.e. a website delivered over https (rather than http). Identikit resources delivered from websites over a non-secure connection will still work, but they will not be able to make use of the service worker capabilities of caching resources for offline use.

If you are hosting an Identikit resource on a CMS hosted page, using the service worker can be problematic. You may have to deploy the ‘sw.js’ file in the root of your website. There may be other problems to overcome. If you can deploy via a standalone HTML page, this will be much easier.

You must also either remove the pwaSupress option in your top-level html page, or set its value to false, in order for the Identikit to use the service worker.

I checked your kits on the fscbiodiversity.uk domain and I can see the service worker registered correctly there, whereas on the netlify domain there is no service worker. Two screenshots below for comparison.

Service worker registered and in use
Service worker registered and in use2880×1540 99.8 KB

Service worker not registered
Service worker not registered2880×1540 64.4 KB