How to embed Cryptocurrency Widgets on WordPress Posts, Pages, Blogs with LunarCRUSH

Published in

LunarCrush

8 min readMar 19, 2020

Embedding LunarCRUSH Widgets on your WordPress site is easier than you imagine. The traditional way to embed is by using the HTML attributes <iFrame>. To do this, simply take the URL of the page you want to embed, and use it as the source for the Tag. Then, your code becomes:

<iframe src=”your_webpage_url”> </iframe>

Then, you need to add more parameters to your tag. You can define the window of the iFrame by using the parameters:

Width/Height — For height and Width of the iFrame window, define values in Px

Frameborder — For displaying or hiding the Frameborder, use values ‘0’ or ‘1.’

Align — For defining the window’s page alignment, Use values “left” “right” “right” “top” “bottom.”

Scrolling — For disabling or enabling Scrolling inside the Window. Use values “yes,” “no” or

You will need to sign up for a LunarCRUSH free or PRO account and create an API key here to be able to render the widgets. Now we have the ability to configure the widgets using url parameters appended to the iFrame Source URL. For example:

?key={API_KEY_HERE} — Required to render the widgets.
&symbol=BTC — Change the symbol that is displayed in the widgets.
&interval=1 Week — Change the time interval being displayed in the charts (default is 1 Week).
&price_correlation=true|false — Show a price line in addition to the selected metric (default = false)
&metric=galaxy_score — Change the timeseries metric being displayed (Metric widget only).
&animation=true|false — Show or hide component animations (default = true)
&theme={See themes section for instructions}
&scrolling=true|false (default = true) — Enable or disable scrolling on the widget inner content. Use this if you want to set scrolling=false on the iframe with a fixed height but still want to allow scrolling within the widget.

Then simply paste your code into the text editor of your post on WordPress, and that should display your post easily. For example, we can just take the URL “https://lunarcrush-widgets.firebaseapp.com” and use it as our source. You start each segment with ? — And build a tag for our embedded page.

Then using the added attributes for customization, we get:

<iframe src=”https://lunarcrush-widgets.firebaseapp.com/candlestick?key={API_KEY_HERE}&symbol=BTC&interval=1 Week&animation=false&theme=dark” id=”candlestick” frameBorder=”0" border=”0" cellspacing=”0" scrolling=”no” style=”width: 100%; height: 300px;”></iframe>

This will provide us with an incredibly powerful, dark themed, Candlestick widget which displays any data point, in our case ‘BTC’, and compares it to price over a specified timeframe.

How To Embed Specific LunarCRUSH Widgets (Candlestick, News, Social, Metrics, Galaxy Score, Wordcloud)

Specific widgets can be rendered using one of the following url paths:

/candlestick
/galaxy
/social
/metrics
/news
/wordcloud

CANDLESTICK

/candlestick

The incredibly powerful Candlestick widget takes any data point and compares it to price over a specified timeframe.

<iframe src=”https://lunarcrush-widgets.firebaseapp.com/candlestick?key={API_KEY_HERE}&symbol=BTC&interval=1 Week&animation=false&theme=dark” id=”candlestick” frameBorder=”0" border=”0" cellspacing=”0" scrolling=”no” style=”width: 100%; height: 300px;”></iframe>

GALAXY SCORE

/galaxy

The Galaxy Score indicates how healthy a coin is by looking at combined performance indicators across markets and social engagement. Display the real-time Galaxy Score of any coin.

<iframe src=”https://lunarcrush-widgets.firebaseapp.com/galaxy?key={API_KEY_HERE}&symbol=BTC&interval=1 Week&animation=false&theme=dark” id=”galaxy-score” frameBorder=”0" border=”0" cellspacing=”0" scrolling=”no” style=”width: 100%; height: 300px;”></iframe>

SOCIAL FEED

/social

Display social feeds from multiple sources including Twitter, Reddit, news channels and more all at once. Gain unique insights into what’s being talked about in real time. All social feeds have been cleaned with spam removed and can be organized by coin.

<iframe src=”https://lunarcrush-widgets.firebaseapp.com/social?key={API_KEY_HERE}&symbol=BTC&interval=1 Week&animation=false&theme=dark” id=”social-feed” frameBorder=”0" border=”0" cellspacing=”0" scrolling=”no” style=”width: 100%; height: 300px;”></iframe>

METRICS

/metrics

Choose one of 20 possible indicators and graph it over time. Choose from a range of different time periods. All data can be segmented by individual coins. You can even have the option of adding price data points relative to any metric.

<iframe src=”https://lunarcrush-widgets.firebaseapp.com/metrics?key={API_KEY_HERE}&metric=galaxy_score&price_correlation=true&symbol=BTC&interval=1 Week&animation=false&theme=dark” id=”metrics” frameBorder=”0" border=”0" cellspacing=”0" scrolling=”no” style=”width: 100%; height: 300px;”></iframe>

NEWS ARTICLES

/news

View news articles, organized by sentiment. All news has been cleaned with spam removed. The News Articles widget is organized by any coin, which allows the widget to be contextual to the page or section where it’s embedded.

<iframe src=”https://lunarcrush-widgets.firebaseapp.com/news?key={API_KEY_HERE}&symbol=BTC&interval=1 Week&animation=false&theme=dark” id=”news-articles” frameBorder=”0" border=”0" cellspacing=”0" scrolling=”yes” style=”width: 100%; height: 300px;”></iframe>

WORD CLOUD

/wordcloud

Uncover keywords used throughout collected social content for any coin. The Word Cloud is generated from all recent and available social posts from Twitter and Reddit. It looks at frequency of mentions. All data is segmented by either all coins or specific, individidual coins.

<iframe src=”https://lunarcrush-widgets.firebaseapp.com/wordcloud?key=7dttq908z39ajbd47dsc08&symbol=BTC&interval=1 Week&animation=false&theme=dark” id=”wordcloud” frameBorder=”0" border=”0" cellspacing=”0" scrolling=”no” style=”width: 100%; height: 300px;”></iframe>

Creating a custom theme

It is also possible to pass a custom theme object into each widget. Here is an example of our default light theme setup. Simply edit any of the color values to customize the theme to your needs and then serialize the object and append it to the query string of the embed URL (example below).

var theme = {
  type: 'light',
	common: { black: '#000', white: '#fff' },
	background: { paper: '#fff', default: 'rgba(249, 249, 249, 1)' },
	primary: {
		light: 'rgba(69, 157, 255, 1)',
		main: 'rgba(5, 122, 255, 1)',
		dark: 'rgba(0, 78, 164, 1)',
		contrastText: '#fff'
	},
	secondary: {
		light: 'rgba(69, 118, 255, 1)',
		main: 'rgba(5, 122, 255, 1)',
		dark: 'rgba(0, 41, 151, 1)',
		contrastText: '#fff'
	},
	dark: {
		light: '#0066ff',
		main: '#0044ff',
		// dark: will be calculated from palette.secondary.main,
		contrastText: '#ffcc00'
	},
	error: {
		light: 'rgba(229, 115, 115, 1)',
		main: 'rgba(244, 67, 54, 1)',
		dark: 'rgba(211, 47, 47, 1)',
		contrastText: '#fff'
	},
	contrastThreshold: 3,
	text: {
		primary: 'rgba(0, 0, 0, 0.8)',
		secondary: 'rgba(0, 0, 0, 0.54)',
		disabled: 'rgba(0, 0, 0, 0.38)',
		hint: 'rgba(0, 0, 0, 0.38)'
	},
	backgroundColor: 'rgba(249, 249, 249, 1)',
	poweredByTextColor: '#1a87ff',
	textLinkColor: '#1a87ff',
	loadingIndicatorColor: 'rgba(133, 139, 146, 1)',
	tooltipBackgroundColor: '#000',
	tooltipTextColor: 'rgba(255,255,255,0.8)',
	infoIconColor: 'rgba(133, 139, 146, 1)',
	metricCard: {
		positiveTextColor: '#3aca60',
		neutralTextColor: 'rgba(0, 0, 0, 0.54)',
		negativeTextColor: '#f50057'
	},
	metricsWidget: {
		yAxisTitleColor: '#333333',
		yAxisLabelColor: '#333333',
		xAxisLineColor: '#e6e6e6',
		xAxisTickColor: 'rgb(204, 214, 235)',
		xAxisLabelColor: 'rgba(255,255,255,0.5)',
		pointLabelColor: '#fff',
		gridLineColor: '#e6e6e6',
		tooltipBackgroundColor: '#fff',
		tooltipTextColor: '#000',
		priceCorrelationLineColor: '#1a87ff',
		positiveAreaChartColor: 'rgba(126,211,32, 0.2)',
		positiveLineColor: 'rgba(126,211,32, 1)',
		negativeAreaChartColor: 'rgba(255,39,0, 0.2)',
		negativeLineColor: 'rgba(255,39,0, 1)'
	},
	galaxyScoreWidget: {
		titleColor: '#000',
		trackBackgroundColor: '#ececec',
		bullishBarColor: '#1a87ff',
		neutralBarColor: 'rgba(133, 139, 146, 0.5)',
		bearishBarColor: '#F50057',
		bullishTextColor: '#1a87ff',
		neutralTextColor: '#000',
		bearishTextColor: '#F50057',
		separatorColor: '#fff',
		scoreTextColor: '#000',
		infoIconColor: 'rgba(133, 139, 146, 1)',
		tooltipBackgroundColor: '#000',
		tooltipTextColor: '#000'
	},
	newsWidget: {
		titleColor: '#000',
		articleTitleColor: '#69d8ee',
		articleDescriptionColor: '#000',
		bullishTextColor: '#7ed31f',
		neutralTextColor: 'rgba(133, 139, 146, 1)',
		bearishTextColor: 'rgba(244, 67, 54, 1)',
		dateTextColor: '#ccc',
		thumbnailBackgroundColor: '#69d8ee',
		thumbnailIconColor: '#000'
	},
	socialWidget: {
		titleColor: '#000',
		postDateColor: '#6f7e82',
		postTitleColor: '#ccc',
		bullishTextColor: '#7ed31f',
		neutralTextColor: 'rgba(133, 139, 146, 1)',
		bearishTextColor: 'rgba(244, 67, 54, 1)'
	},
	wordCloudWidget: {
		minFontSize: 15,
		maxFontSize: 60,
		colors: [ '#000', 'rgba(244, 67, 54, 1)', '#7ed31f', '#aaa' ]
	},
	candlestickWidget: {
		yAxisTitleColor: '#333333',
		yAxisLabelColor: '#333333',
		xAxisLineColor: '#e6e6e6',
		xAxisTickColor: 'rgb(204, 214, 235)',
		xAxisLabelColor: 'rgba(255,255,255,0.5)',
		pointLabelColor: '#000',
		gridLineColor: '#e6e6e6',
		tooltipBackgroundColor: '#fff',
		tooltipTextColor: '#000',
		metricLineColor: '#1a87ff',
		highPriceBarColor: 'rgba(104,212, 131,0.8)',
		highPriceLineColor: 'rgba(104,212, 131,0.8)',
		lowPriceBarColor: 'rgba(243,69,80, 0.8)',
		lowPriceLineColor: 'rgba(243,69,80, 0.8)',
		volumeBarColor: 'rgba(133, 139, 146, 1)',
		legendTextColor: 'rgba(255,255,255,0.5)',
		legendTextHoverColor: '#000',
		legendTextHiddenColor: 'rgba(255,255,255,0.5)',
		metricDropdownBackgroundColor: '#000'
	}
}var serializedTheme = window.btoa(JSON.stringify(theme));// Example of passing the serialized custom theme as a query param into a widget.
<iframe name="Galaxy Score" id="galaxy-score-widget" src=`https://lunarcrush-widgets.firebaseapp.com/galaxy?key=${API_KEY_HERE}&theme=${serializedTheme}` frameborder="0" border="0" cellspacing="0" scrolling="no"></iframe>

Using a custom CSS stylesheet

It is also possible to pass in your own custom stylesheet file to override page and component styles inside the widget iframe. This will need to be hosted on a public domain to make it accessible to the widget.

/* styles.css */
/* Include custom fonts */
@import url(https://fonts.googleapis.com/css?family=Roboto&display=swap);/* Override global body styles */
html,
body {
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: #0e1722;
	color: #fff;
	font-family: 'Roboto', sans-serif;
}/* Override link colors */
a {
	color: #69d8ee;
	text-decoration: none;
}/* Override specific UI element styles */
.loading-container {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1;
	height: 100vh;
  background-color: #fff
}// Example of passing the custom stylesheet as a query param into a widget.
<iframe name="Galaxy Score" id="galaxy-score-widget" src=`https://lunarcrush-widgets.firebaseapp.com/galaxy?key=${API_KEY_HERE}&stylesheet=https://yourdomain.com/styles.css` frameborder="0" border="0" cellspacing="0" scrolling="no"></iframe>

Current Widgets

Galaxy Score Widget
News Article Widget
Feed Widget
News articles
Tweets
Reddit Posts
Word Cloud Widget
Candlestick Widget

Supported Metrics:

market_cap (Market Cap)
galaxy_score (Galaxy Score)
price_score (Price Score)
average_sentiment (Average Sentiment)
social_impact_score (Social Impact Score)
correlation_rank (Correlation Rank)
volatility (Volatility)
social_score (Social Volume)
social_volume (Social Volume)
twitter_volume (Twitter Volume)
reddit_volume (Reddit Volume)
news_volume (News Volume)
search_volume (Search Volume)
spam_volume (Spam Volume)
bullish_sentiment (Bullish Sentiment)
bearish_sentiment (Bearish Sentiment)

Metrics Widget

Supported Metrics:
average_sentiment (Average Sentiment)
correlation_rank (Correlation Rank)
galaxy_score (Galaxy Score)
market_cap (Market Cap)
market_cap_rank (Market Cap Rank)
news_articles (News Volume)
popular_tweet (Popular Tweets)
price_btc (Price BTC)
price_score (Price Score)
priceclose (Price Close)
pricehigh (Price High)
pricelow (Price Low)
priceopen (Price Open)
reddit_comment (Reddit Comments)
reddit_post (Reddit Posts)
reddit_post_reddit_comment (Reddit Volume)
search_average (Search Volume)
social_impact_score (Social Impact Score)
social_score (Social Volume)
tweet (Twitter Volume)
tweet_sentiment1 (Very Bearish Sentiment)
tweet_sentiment2 (Bearish Sentiment)
tweet_sentiment2_tweet_sentiment (Negative Sentiment)
tweet_sentiment3 (Neutral Sentiment)
tweet_sentiment4 (Bullish Sentiment)
tweet_sentiment5 (Very Bullish Sentiment)
tweet_sentiment4_sentiment5 (Positive Sentiment)
tweet_sentiment_impact1 (Very Bearish Sentiment Impact)
tweet_sentiment_impact2 (Bearish Sentiment Impact)
tweet_sentiment_impact3 (Neutral Sentiment Impact)
tweet_sentiment_impact4 (Bullish Sentiment Impact)
tweet_sentiment_impact5 (Very Bullish Sentiment Impact)
tweet_spam (Spam Volume)
volatility (Volatility)
volumefrom (Market Volume Open)
volumeto (Market Volume Close)

Additional Resources

Add Crypto Community Widgets To your Website

LunarCRUSH provides advanced documentation into how to host widgets within your website.

Introducing LunarCRUSH for Developers + LunarSTREAM™

The Billion Dollar Industry Crypto’s Been Waiting For

<Our Vision/>

Our vision is a world where cryptocurrency education and research are simple and ubiquitous. Our mission is to provide the extremely passionate and talented cryptocurrency developer community the tools to build it.

🌎🔥🚀🌕 Your LunarCRUSH Team