LiveScrape - Configure Custom CSS
Liveclicker allows you to create a custom Liveclicker appearance for your dynamic webscrape content, using CSS.
Edit the appearance of a dynamic webscrape
1. In a dynamic webscrape, it is possible to change the appearance of the webscrape. To do so, click Edit LiveScrape in the Edit Appearance section:
2. The Code Editor is displayed.
3. On the left hand side a preview is shown. The right hand side shows the CSS editor.
4. The option Remove non-scrape content allows to hide blocking overlays.
5. To perform a quick edit of a specific area of the scraped content, select the area to edit in the preview. Several quick edit options appear on the right hand side:
- Ability to remove the content completely
- Ability to edit font type (only available if you selected text)
- Ability to edit font size (only available if you selected text)
- Ability to edit font color (only available if you selected text)
5. Make the necessary changes and click Add Edits and Preview. The Code editor is updated and the preview reflects the changes:
6. If you need edits that are not possible through the Quick edit options, you can enter custom jQuery code into the editor.
Note: This is an advanced technique that requires basic JavaScripting skills in general, and jQuery knowledge in particular. If you don't have someone in house that can help you with this, reach out to support@liveclicker.com or your account manager to learn about the professional services we offer.
Technical note: For jQuery experts to control content and layout of the LiveScrape, in the code editor, $rteTargetElement initializes your jQuery selector and is available as a variable you can use.
Example: $rteTargetElement.css("width","100px")
7. When you are happy with the result, click Save to return to the wizard and preview the scraped image with your changes.
Frequently asked questions (Advanced)
How does the website preview for the HTML area selector and appearance editor work?
This tool gets the HTML source of the site you want to scrape and then renders it in a window inside the Liveclicker platform. This is NOT the actual page that we render inside our live scraping engines. It's just a preview tool for letting the scraping engine know what is the content you want to scrape and for you to see how some modifications would look.
My site looks different inside the HTML area selector preview from what I see in my browser - why is this happening?
Apart from HTML, websites use CSS (For appearance) and Javascript (For behavior and interaction). These languages are written in scripts that are linked to the HTML code through URL <link> and <script> tags. These tags point to a web resource (i.e. https://www.mysite.com/resources/myJavascriptFile.js) which are JS or CSS documents.
The preview looks different because your website’s JS or CSS documents aren’t loading in our preview.
Why you ask?
Javascript conflicts. .js or .css files are injected by javascript and are very fragile, like a house of cards. One conflict could prevent the execution of other files needed to render your site correctly. One common example is requesting resources like html, css, and font files from outside the website’s domain when not allowed by the site.
What happens if your js or css files are prevented by your site configuration from loading:
If a CSS stylesheet does not load, styles won't be applied, so things can take a different size, position, or styles like colors and fonts won't be applied.
If JS scripts do not load, the page might not render content that comes from external pages (content injection), among other things.
What does Liveclicker do to prevent these issues?
When getting the HTML source of the page, we parse it looking for common scenarios that could prevent a CSS/JS resource to load.
For instance, we look for relative source URLs in scripts, which need to be changed to absolute URLs, and scripts injected using Javascript.
BUT unfortunately there are some conflicts above that we can’t prevent.
If my site does not look the same in the preview, will that also happen in the actual image generated by the webscraper engine?
No, let's say your site is protected against cross-origin requests, this means, your site won't allow its javascript files to be loaded from another domain (our preview).
If that is the case, the selection tool won't be able to use those JS files, but the site we load inside the actual webscraper won't face the same issue and it will work normally. You can test this by selecting what you would like in the preview, then closing and looking at the actual preview image generated by our webscraper in the wizard.
I get an HTML selector error message and am not able to pull in my selected HTML area, why is this happening?
There could be 2 reasons for this:
1. Your site might not allow scraping tools to request it, or have security blocks against non-human visitors
What can I do? - If the content you want to scrape cannot be retrieved by the webscraper, our professional services team can build a parser service to resolve these issues. Please note, this is custom work specific to your website, so full-service hours can be used here.
2. The selector you input or was generated by our preview selector is wrong
What can I do? - Someone with HTML/jQuery understanding should build a new jquery selector. We suggest relying on ID attributes if possible. Else, classes attributes are also good.
- If the content you want has an ID, you could write something like:
$('#myheroBanner'');
- If the content you want has a class, you can also target by class, but notice classes might be used in several different places in your site, so an indicator of position is recommended:
$('.product').eq(4);
- If the content you want to target does not have a class or ID, try to find the closest class or ID from parent elements, and build the selector from there:
$('#myproducts').find('div').eq(5);
The image generated in the LiveScrape wizard preview does not look quite like the element on my website and/or I want to change how it looks:
Why? While sites rendered inside the webscraping engine usually look the same as rendered in your browser, they could present some differences in HTML structure, because the browsers could be different, as well as the operating systems. Also, HTML elements on your site might have properties such as padding or margins which will might not be evident in the website, but they are a part of the element and will be captured as well.
What can I do?
Use the Edit Appearance tool to perform quick edits like editing font, removing items, and hiding outside content
Use the advanced jQuery editor to write code to be executed in the site before the screenshot is taken.
I am already using the Editor tools, and I am still having issues:
Try unchecking the 'Remove Non-Scrape Content' option. This feature triggers javascript code to hide all the content on your site except for your targeted HTML area. This is very useful for hiding cumbersome modal windows and popups. While this feature should not modify how your targeted HTML area looks, there could be cases where editing parent elements will reflect on the appearance of its children.
If you were using this feature to hide a modal or pop-up, please target it directly and remove it using custom jQuery. Example:
$('#<id of your selector>').remove():
