# Inline style/script

The JS & CSS code is inserted directly into the page through tags `<style` `<script` (not src attr) called inline.

You can modify it's content before it executes on the browser. Use the hook `hpp_inline_script` `hpp_inline_style` as bellow:

```php
/**
 * Edit script tag in head,footer,footer-data,get_option..
 *@param $js
 */
add_filter('hpp_inline_script', function($js) {
	//in footer
	if(strpos($js, '_HWIO.extra_assets=')!==false) {
		$js = str_replace('})(jQuery);;','})(null);;', $js);
		$js = str_replace('_HWIO.readyjs(function()','_HWIO.readyjs(function($)', $js);
		
	}
	
	//remove `_HWIO.readyjs`
	if(strpos($js, 'function tdBlock')!==false) {
		$js = str_replace('_HWIO.readyjs(function(){','', substr($js,0, strlen($js)-2));
	}
	//other
	if(strpos($js,'_HWIO.readyjs')===false) $js = str_replace('timer_metaslider_12()', '_HWIO.readyjs(timer_metaslider_12)', $js);
	
	//facebook
	if(strpos($js, 'fbq(')!==false && strpos($js, '},"fbq")')===false) {
		$js = (substr($js,-3)=='});'? substr($js,0,-3): substr($js,0,-2)). '},"fbq")';
	}
	
	return $js;
});

/**
 *@param $css
*/
add_filter('hpp_inline_style', function($css){
	return $css;
});
```

Each JS file allows you to add inline JS by the function `wp_add_inline_script` , these inline code from all JS files will group into a single \<script tag & placed at the bottom of the page. You can also modify each inline code like this:

```php
//script data
add_filter('hpp_inline_script_part', function($js, $handle){
	if($handle=='wp-util') $js = str_replace('find', 'replace', $js);
	return $js;
}, 10, 2);
```

![](https://1645388323-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MYNqsVWdjtnuDIOHong%2F-MYPUCXjvK6xCaIBtJsa%2F-MYPinT6nFIRviPsDbzn%2Fimage.png?alt=media\&token=2226b2c8-07fd-46ee-9ef3-f0f83f19050d)

### Lazy script

Almost Inline scripts depend on other library such as jquery so to work without issue these inline code will be fired only after all JS files have complete execution. Hence they need to delay a few milliseconds, and you can see it nested in the event `_HWIO.readyjs`&#x20;

![](https://1645388323-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MYNqsVWdjtnuDIOHong%2F-MYPUCXjvK6xCaIBtJsa%2F-MYPj5aCFisdMl1SUapH%2Finline-js.png?alt=media\&token=ff987171-0f6f-411d-a2b4-be5f42a5fa8d)

However, if your website has some variables that need to be shared for other scripts to use, So you will have to open global for that variable. There are 2 ways to do this: create global variables with `window.` using the filter `hpp_inline_script` OR remove the event `_HWIO.readyjs`&#x20;

Method 1: using the filter to replace string from `var something=` to`window.something=`

Method 2: removing the wrap event 'readyjs' , by adding blacklist text that found in \<script tag you want to remove this event.

```php
add_filter('hpp_allow_readyjs', function($ok, $js){
	if(hpp_in_str($js, ['new PerformanceObserver',]) ) return false;
	return $ok;
}, 10, 2);

```

By default, entire inline scripts are run after the document ready, if you want to specific which inline code should run only after the user interacts on the web (ex: scroll, mouse move, click..) so see the below example.

```php
add_filter('hpp_delay_it_script', function($v, $js){
	$find = [
		'www.googletagmanager.com','connect.facebook.net','www.google-analytics.com','bing.com','new Ya.Metrika',
		'googlesyndication','adsbygoogle',"fbq('set'",'fbq("set"',"fbq('init'","fbq('track'",'gtag(',
	];
	if(hpp_in_str($js, $find)) return true;
	return $v;
},10, 2);
```

With the above snippet, help you create the readyjs event has form of: `_HWIO.readyjs(null,function(){});`&#x20;


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://optimize.pencidesign.net/documentation-for-devs/inline-style-script.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.