How to Easily Embed the Search Feature on to your Website
The Chemical Safety SDS and GHS database is a free service offered to academic institutions to provide hazardous materials safety information to students, educators, lab personnel and administrative personnel on and off campus.
Using Chemical Safety SDS search
To use Chemical’s Safety SDS search functionality in your web page, you have two options:
– Inserting a direct link to our page
– Embedding the search functionality in your page (2 different ways)
Inserting a direct link
Inserting a direct link to our SDS search page is the easiest solution and requires minimal effort from the webmaster. The link will open in a new tab so the visitor can keep both of the websites in his browser.
To insert a direct link to our SDS search page, add this code (copy & paste) to your webpage:
<a href="https://www.chemicalsafety.com/sds-search" target="_blank"> Click here for SDS search </a>
Embedding the search functionality in your page
Embedding the search functionality in your page can also be achieved in two ways:
A. Dynamic Embedding (recommended for advanced users)
You can add the Chemical Safety search form and results panel in any location on your web page, by:
1st Step: Add a <div> element in your web page to contain the SDS search form and results. You can optionally add any styling you require:
<div id="cd_divSearch" style="max-width: 800px; margin: auto;"></div>
Note: if you omit this step, the embedded content will be added at the end of the page, extending to the whole page width
2nd Step: Add the following code at the end of your page, just before the closing </body> element:
<script src= "https://26uim91zt146331ewc368q0n-wpengine.netdna-ssl.com/sds1/external/cs_script.php?key=GDQBLEJ9FZYT3PLFI7R2"> </script><script type="text/javascript">ChemSafe.initDOM();</script>
Performing the above two steps, will add in your page the following form:
B. Static iFRAME embedding
You can the add the search functionality in your web page by adding the following code.
<iframe width="800" height="800" src="https://www.chemicalsafety.com/sds-search"></iframe>
In the above code snippet you can set the width and height to match your website design. This solution is easier to implement but is not so customizable as the previous one.
You can find examples of all the usage scenarios at the following file: